Ad

How To Make An HTML Element "accelerate" Into Position

- 1 answer

On my site I have an element that stays in the upper corner, therefore following the user when he or she scrolls down. It's like this Fiddle. What I'd like to do instead is make it have a better following effect by staying put when the user scrolls and then accelerating back into it's fixed position. How would I do that?

#follow {
    position: fixed;
    right: 30px;
    top: 70px;
}

$(window).scroll(function(){

    // ???
});
Ad

Answer

How about something like this, if you change to position: absolute and then use .animate(). Just need to make sure to use .stop() on each scroll so that if you scroll twice in quick succession it doesn't delay.

#follow {
    position: absolute;
    right: 30px;
    top: 70px;
}

$(window).scroll(function(){ 
    $("#follow").stop();
    var window_top = $(window).scrollTop();
    $("#follow").animate({"top":window_top+70}, 500);
});

Check out the fiddle to see if it's what you're looking for: https://jsfiddle.net/f7gjvpof/3/

Ad
source: stackoverflow.com
Ad