如何让div跟随jQuery顺利滚动？

Question

在我的容器中有部分/框,但是当没有其他框可见时,这些框中的最后一个框应该跟随滚动.

因此,当用户向下滚动时,他会看到正常的侧边栏,但是当用户已经足够下降时,侧边栏会结束,但最后一个框开始跟随屏幕顶部.我在不同类型的网站上看到了很多.

我的代码目前:

$(window).scroll(function(){
    $.each($('.follow-scroll'),function(){
        var eloffset = $(this).offset();
        var windowpos = $(window).scrollTop();
        if(windowpos<eloffset.top) {
            var finaldestination = 0;
        } else {
            var finaldestination = windowpos;
        }
        $(this).stop().animate({'top':finaldestination},200);
    });
});

Answer 1

由于这个问题得到了很多观点,并且在投票最多的答案中链接的教程似乎是脱机的,我花时间来清理这个脚本.

在这里看到它: JSFiddle

JavaScript的:

(function($) {
    var element = $('.follow-scroll'),
        originalY = element.offset().top;

    // Space between element and top of screen (when scrolling)
    var topMargin = 20;

    // Should probably be set in CSS; but here just for emphasis
    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();

        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);

Answer 2

有一个很棒的jQuery教程,请访问https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/.

它复制Apple.com购物车类型的侧边栏滚动.可能为您提供良好服务的Google查询是"固定浮动侧边栏".

Answer 3

根据我的拙见,解决方案可归结为此:

var el=$('#follow-scroll');
var elpos=el.offset().top;
$(window).scroll(function () {
    var y=$(this).scrollTop();
    if(y<elpos){el.stop().animate({'top':0},500);}
    else{el.stop().animate({'top':y-elpos},500);}
});

我已经改变了作业,el因为在我的拙见中,再次找到一个单独的元素并不是一个很好的习惯.如果你只想要一个元素通过id找到它.如果要迭代元素集合,则按类查找它们.

我el用来保持我的代码小,但希望,可读!

请注意 - 我的答案在这里指的是当时接受的答案(目前仍然是公认的答案,但后来经过编辑,因此我的答案不再"归结"你在@Martti Lane的答案中看到的答案我的回答"归结"了他原来的,接受的,回答;你可以看一下@ Martti答案的编辑历史,如果你对我"归结"的东西感兴趣的话.)

Answer 4

这对我来说就像一个魅力.

JavaScript的:

$(function() { //doc ready
    if (!($.browser == "msie" && $.browser.version < 7)) {
        var target = "#floating", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
        $(window).scroll(function(event) {
            if (top <= $(this).scrollTop()) {
                $(target).addClass("fixed");
            } else {
                $(target).removeClass("fixed");
            }
        });
    }
});

CSS:

#floating.fixed{
    position:fixed;
    top:0;
}

资料来源: http ://jqueryfordesigners.com/fixed-floating-elements/