I have two static (html position: fixed;) images at the edges of the screen (right and left). When users scrolls more than 100 pixels from top, these edges retract 50 pixels.

I want to them to reappear (normal again, as they were at the beginning) when users scrolls back to top. I tried adding boolean value which is true when they retract and added it to condition when they need to reappear again. But it isn't working. Why?

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() <= 0 && userHasScrolled) {
  $(".rightstatic").animate({marginRight: '+50px'}, 400);
  $(".leftstatic").animate({marginLeft:'+50px'}, 400);
  userHasScrolled = false;
}

Edit:

$(document).ready(function(){
 $(window).scroll(function(){
   if ($(window).scrollTop() > 100) {
     $(".rightstatic").animate({marginRight:'-20px'}, 900);
     $(".leftstatic").animate({marginLeft:'-20px'}, 900);
   } else if($(window).scrollTop() <= 0) {
     $(".rightstatic").animate({marginRight: '+0px'}, 400);
     $(".leftstatic").animate({marginLeft:'+0px'}, 400);
   }
 });
});

It kind of works, but has a HUGE delay. Like more than a minute after reaching top it retracts back.

Edit 2: After throttling it finally works. Thanks @TomaszBubała.