请改进：按照滚动但粘在上面

Question

我已经完成了我想要做的事情：按照mousescroll制作一个元素。如果你快速向下滚动，元素会暂时消失，然后按滚动回到原始位置。这是第一个小提琴： http://jsfiddle.net/s4Tsy/

我也完成了使元素坚持到顶部。如果我们现在快速滚动它永远不会消失。这是一个小提琴：http://jsfiddle.net/aRnAe/

我的问题是：这可以更优雅地完成吗？我确信这段代码很笨拙。我是新手，想学习。

$(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);
        }
    } 
});

亲切的问候， 斯蒂芬

Answer 1

结果如下。

<强> >> A jsfiddle of the code below

我认为CME64的代码是正确的。

的脚本 的

$(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 * （当然效果仅在长滚动页面中可见）

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