Question

I have a div that animates up and down as you scroll, here’s the code,

$(document).ready(function(){
    $(window).scroll(function () {
      set = $(document).scrollTop()+"px";
            $('#bymail-inner').animate({top:set},{duration:500,queue:false});
    });
});

It works really great, however is there a way to stop it once it has reached close to the bottom of the page?

Answer 1

There’s a pretty good way of detecting if a user has scrolled near the bottom of the page using a little DOM math:

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        //User near the bottom, fix it where you want the element to be
        $('#bymail-inner').animate({top:($(window).height()/2)},{duration:500,queue:false});
    }else{
        set = $(document).scrollTop()+"px";
        $('#bymail-inner').animate({top:set},{duration:500,queue:false});
    }
});