3

我已经完成了我想做的事情：让一个元素跟随鼠标滚动。如果您快速向下滚动，该元素会消失一段时间，然后跟随滚动回到其原始位置。这是第一个小提琴：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);
        }
    } 
});

亲切的问候，斯蒂芬

4

1 回答 1

1

这是结果。

>> 下面代码的 jsfiddle

我相信 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>
于 2013-06-19T06:57:00.980 回答