Return images back to normal when user scrolls to top again

I have 2 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;
}