Bringen Sie die Bilder wieder in den Normalzustand, wenn der Benutzer erneut nach oben scrollt ⇐ CSS

[Anonymous]

Ich habe zwei statische (HTML-Position: fest;) Bilder an den Rändern des Bildschirms (rechts und links). Wenn Benutzer mehr als 100 Pixel von oben scrollen, werden diese Kanten um 50 Pixel zurückgezogen.
Ich möchte, dass sie wieder erscheinen (wieder normal, wie am Anfang), wenn Benutzer wieder nach oben scrollen. Ich habe versucht, einen booleschen Wert hinzuzufügen, der wahr ist, wenn sie zurückgezogen werden, und ihn zur Bedingung hinzugefügt, wenn sie wieder angezeigt werden müssen. Aber es funktioniert nicht. Warum?

Code: Select all

userHasScrolled = false;

$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100) {
$(".rightstatic").animate({marginRight:'-50px'}, 900);
$(".leftstatic").animate({marginLeft:'-50px'}, 900);
userHasScrolled = true;
}
});
});

if($(window).scrollTop()  100) {
$(".rightstatic").animate({marginRight:'-20px'}, 900);
$(".leftstatic").animate({marginLeft:'-20px'}, 900);
} else if($(window).scrollTop()