jquery - jQuery 如何让 div 顺畅地跟随滚动？

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);