how do i keep my sticker in same position without fixing it after scrolling the page?

Question

i am trying to move a sticker when user will stop scrolling.

i have put my sticker at right top position, and i want if user has scrolled the window then it will show scrolling with the window but when user stopped scrolling, i want that sticker to be it on its real position,(right top corner).

i'm not getting any idea how to do this.

here is what i have tried so far.

$(document).ready(function() {

    var sticker = $("#sticker");

    var pos = sticker.position();                    

    $(window).scroll(function(e) {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height();

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * ($(document).height() - sticker.height()));

        sticker.css({
            'top': position
        });
    });

});

Check here.

Please help.

[EDITED]

I'm really sorry about that. i didn't clearly mention my question. I want my sticker to scroll with the body content but after stopping scrolling it should be go up/down with some sliding effect to the top right corner. and i dont want to fix sticker at scrolling time or at last. I have search around but didn't get anything use full.

May be it could be done by other way like using some sticker plugins or some tricks. So could somebody please give me some hints or any trick to do so.

Thanks.

Answer 1

You should use fixed positioning in css. That way the sticker will always be in the top right corner of the screen no matter what sort of scroll is going on.

For example:

<div class="sticker">Sticker</div>

.sticker {
    position: fixed;
    top: 0;
    right: 0;
}

Answer 2

Similar thing from SO. jQuery scroll() detect when user stops scrolling

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});