Is there anyway to make this div come back when you scroll to top again

Question

So i got this div animate out of the page perfectly but whenever i scroll back up it's still out of the page i tried an if/else statement but it doesn't come back, anyone could help me with this?

Thanks in advance!

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 300){
            $('.offer').stop().animate({ top: '+= 10' }, 10, "linear");
        }
        else if ($(window).scrollTop() < 300){
            $('.offer').stop().animate({ top: '-=10' }, 10, "linear");
        }
    });
});

Answer 1

The problem is that you are adding or removing 10 from the position every single time a scroll event is fired.

What you should do instead is have a flag, such as isFurtherThan300 , which keeps track of whether the position is before or after your cutoff.

Then, perform the animation only if isFurtherThan300 changes.

Answer 2

Try this following code

$(document).ready(function(){
 //Keep track of last scroll
  var lastScroll = 0;
  $(window).scroll(function(){
    var st = $(window).scrollTop();
    if (st > lastScroll){
        $('.offer').stop(true).animate({ top: '+= 100px' }, 10, "linear");
    }
    else{
        $('.offer').stop().animate({ top: '-=100px' }, 10, "linear");
    }
    //Updates scroll position
    lastScroll = st;
  });
});

Hope it helps!