Hey zusammen,
ich bin gerade dabei ein Scroll Tab beim Scroll nach oben an der Unterseite der Webseite zu fixieren. Dies klappt soweit schon ganz gut. Nur bisher ist dies leider statisch. Ich habe noch keinen Weg gefunden dies dynamisch für jede Fenstergröße passend zu programmieren. Darüberhinaus habe ich noch ein weiteres Problem wo ich auch nicht weiter weiß.
Und zwar möchte ich erst, dass diese Funktion aktiv ist wenn der Besucher bereits 1 mal nach unten gescrollt hat. Dafür habe ich auch eine Boolesche Variable erstellt und eine IF-Bedingung aufgestellt welche überprüft ob der Besucher bereits einmal nach unten gescrollt hat. Wenn dies erfolgt ist wird die Boolesche Variable auf true gesetzt und somit wird dann die Funktion ausgeführt. Eigentlich einfach - nur bei mir funktioniert das leider nicht bisher. Dies ist bisher auch alles mit statischen Werten.
Ich habe bereits gegoogelt und bei Stockoverflow etc. Beispiele gesehen, nur sie funktionierten bei mir bisher nicht.
Dies ist mein aktueller JQuery Code:
var stickyScrollTab = function(){
var scroll_top = $(window).scrollTop() ? $(window).scrollTop() : null;
if(scroll_top < 690){
$('#showByScrollTab').css({
'display' : 'block',
'position': 'fixed',
'bottom': 0,
'left': 0,
"right" : 0
});
}else {
$('#showByScrollTab').css({
'display' : 'none'
});
}
};
function checkFirstScrollToBottom(scrollHeight){
var firstScrollToBottom = false;
if(scrollHeight > 816){
firstScrollToBottom = true;
}
return firstScrollToBottom;
}
var scrollHeight = $(window).scrollTop() ? $(window).scrollTop() : null;
$(window).scroll(function() {
stickyScrollTab();
});
Alles anzeigen
So habe ich versucht zu überprüfen ob der Besucher bereits 1mal runtergescrollt hat:
$(window).scroll(function() {
if(!firstScrollToBottom){
if(firstScrollToBottom === false ){
var firstScrollToBottom = checkFirstScrollToBottom(scrollHeight);
console.log(firstScrollToBottom);
}
} else{
var firstScrollToBottom = checkFirstScrollToBottom(scrollHeight);
console.log(firstScrollToBottom);
}
if(firstScrollToBottom === true){
stickyScrollTab();
}
});
Alles anzeigen
Eigentlich sollte nach meinem Verständnis dies im 1 Schleifendurchlauf in den Else Block springen und dort die Variable erstellen die ich brauche. Dann beim nächsten Durchlauf ist diese Variable vorhanden und dann geht der 2. Schleifendurchlauf los und ab diesem sollte es nun in den zweiten if-block gehen der solange ausgeführt wird bis firstScrollToBottom true ist. Wenn dies true ist wird dann die Funktion ausgeführt.
Nur es wird auch nichts in der Konsole ausgegeben. Dann liegt davor der Fehler. Ich erkenne ihn leider gerade nicht.
Ich hoffe ihr könnt mir bei meinen 2 Punkten helfen.
Einen schönen 3. Advent euch allen.
Weihnachtliche Grüße,
Stef
Dir wünsche ich auch ein frohes neues sowie allen anderen hier im Forum 🎉🎊🥳.