Please refine: Follow scroll but sticky on top

Question

i have accomplished what i was trying to do: make an element follow the mousescroll. If you'd scroll down fast the element would get out of sight for a while and then follow the scroll back to its original position. Here is a first Fiddle: http://jsfiddle.net/s4Tsy/

I also accomplished to make the element stick to the top. If we scroll fast now it never gets out of sight. Here is a Fiddle: http://jsfiddle.net/aRnAe/

My Question is: Can this be done more elegantly? I am sure this code is clumsy. I am a novice and want to learn.

$(document).ready(function(){
    var el=$('#scrolldiv');
    var originalelpos = el.offset().top;
    var scrolltimer;
    //run on scroll
     $(window).scroll(function(){
        var el=$('#scrolldiv'); // important! (local)
        var windowpos = $(window).scrollTop();
        var currentpos = el.offset().top;
        if(windowpos>=currentpos)
        {
            el.addClass('scrollfixed');
        }
        else
        {
            var finaldestination = windowpos+originalelpos;
            el.stop().animate({'top':finaldestination},2500);
        }
        clearTimeout(scrolltimer);
        scrolltimer = setTimeout(afterScroll, 100);
     });
     function afterScroll() {
        currentpos = el.offset().top;
        windowpos = $(window).scrollTop();
        if (currentpos <= windowpos) {      
            el.removeClass('scrollfixed');
            el.css({top: windowpos });
            finaldestination = windowpos+originalelpos;
            el.stop().animate({'top':finaldestination},1000);
        }
    } 
});

kind regards, Stephan

Answer 1

Here is the result.

>> A jsfiddle of the code below

I take CME64's word for it that the code is ok.

Script

$(document).ready(function(){
    var el = $('#scrolldiv');
    var originalelpos = el.offset().top;
    var scrolltimer;
    //run on scroll
    $(window).scroll(function () {
        var windowpos = $(window).scrollTop();
        var currentpos = el.offset().top;
        if (windowpos >= currentpos) {
            el.addClass('scrollfixed');
        } else  if(currentpos >= $(window).scrollTop() + $(window).height() - el.height() ){
            el.addClass('scrollfixedBtm');
        }else{
            var finaldestination = windowpos + originalelpos;
            el.stop().animate({
                'top': finaldestination
            }, 500);
        }
        clearTimeout(scrolltimer);
        scrolltimer = setTimeout(afterScroll, 100);
    });

    function afterScroll() {
        currentpos = el.offset().top;
        windowpos = $(window).scrollTop();
        if (currentpos <= windowpos) {
            el.removeClass('scrollfixed');
            el.css({
                top: windowpos
            });
            finaldestination = windowpos + originalelpos;
            el.stop().animate({
                'top': finaldestination
            }, 500);
        }else if (currentpos >= $(window).scrollTop() + $(window).height() - el.height()){
            el.removeClass('scrollfixedBtm');
            el.css({
                top: (windowpos+$(window).height()-el.height())
            });
            finaldestination = windowpos + originalelpos;
            el.stop().animate({
                'top': finaldestination
            }, 500);
        }
    }
});

CSS

.scrollfixed {
    position: fixed !important;
    top: 0px !important;
}
.scrollfixedBtm {
    position: fixed !important;
    top: 90% !important;
}
#scrolldiv {
    position: absolute;
    height: 100px;
    width: 30px;
    background-color: #f00;
    left:0;
    top: 100px;
}

* HTML * (of course effect only visible in long scrollable pages)

<div id="scrolldiv"></div>