DIV-Hintergründe beim Scrollen ändern (jQuery)

Ich brauche Hilfe mit jQuery! Ich verwende jquery-3.1.1.min und jquery.color-2.1.0.DIV-Hintergründe beim Scrollen ändern (jQuery)

Ich habe eine Webseite mit mindestens einem "top" div und einem "footer" div. Beide sind fest eingestellt. Was ich will: Wenn Sie den Hintergrund der beiden Divs nach unten scrollen, müssen Sie den Hintergrund ändern. Wenn Sie den gesamten Bildlauf wiederholen, sollte der ursprüngliche Hintergrund geändert werden.

Ich habe den folgenden jQuery-Code. Der erste Teil funktioniert gut; Die Hintergründe ändern sich, wenn ich nach unten scrolle. Meine Frage ist, wie ich sie dazu bringe, mich wieder zu ändern, wenn ich nach oben scrolle.

Ich habe es mit einem 'else' im Code unten versucht, aber das hat leider nicht funktioniert. Wer kann helfen? Nicht gut mit jQuery.

$(document).scroll(function(){ 
    if($(this).scrollTop() > 90){ 
     $(".top").animate({"background-color":"#101010"},'slow'); 
     $(".footer").animate({"background-color":"#101010"},'slow'); 
    }else{ 
     $(".top").animate({"background-color":"rgba(16, 16, 16, 0.8)"},'slow'); 
     $(".footer").animate({"background-color":"rgba(16, 16, 16, 0.8)"},'slow'); 
    } 
});

Quelle

2016-11-17 derrtyones

Der Hintergrund Sie in der zweiten haben sonst ist die gleiche, nur mit 80% Opazität. Wollen Sie das tun? Versuchen Sie, die Ausgabe im Protokoll der Konsole im Browser vorzunehmen, um zu sehen, wann die Rolle aufgerufen wird und ob sie zur else-Anweisung gelangt. – fanfavorite

Ja, sie haben eine Deckkraft als Standard. Wenn ich nach unten scrolle geht es zu # 101010, aber wenn ich nach oben scrolle, passiert nichts. Ich denke nicht, dass das andere überhaupt funktioniert. – derrtyones

Haben Sie bestätigt? Der scrollTop ist entweder über 90 oder er trifft die Scroll-Funktion überhaupt nicht. Wenn Sie ein fiddleJS-Beispiel erstellen, wäre es einfacher zu sehen, was Sie möglicherweise falsch machen. – fanfavorite

Ok ich löste es selbst nach vielem Versuch. Zuerst habe ich die "else if" -Anweisung verwendet.

if($(this).scrollTop() > 89){ 
    //change backgrounds here 
}else if($(this).scrollTop() < 90){ 
    //change backgrounds back 
}

Es hat dann funktioniert, aber es gab eine große Verzögerung. Nach einigen googeln fand ich heraus, dass es mehrmals genannt wird, eine zweite so löste ich, dass die Stop() Funktion unter Verwendung:

$(".top").stop().animate({"background-color":"rgba(16, 16, 16, 0.8)"},'slow');

Quelle

2016-11-17 23:20:43 derrtyones

DIV-Hintergründe beim Scrollen ändern (jQuery)

Antwort

Verwandte Themen