jquery - (div scroll follow) 当div遇到另一个div时，(div scroll follow)也和othere div一起滚动

Question

我有 4 个 div（页眉、左右内容和页脚）。我有right content滚动跟随，我希望发生的是当页脚的顶部遇到底部时right，右侧也与左侧一起滚动div。

我设置了我目前在jsfiddle中的预览。

Answer 1

您可以使用Math.min()和预先计算的值来限制右侧边栏的 marginTop 设置，这样它就不会超出与页脚接触的点进行动画处理：

我已经命名了预先计算的值rightDelta。

$(function() {
    var $sidebar = $("#right"), 
        $window = $(window),
        rightOffset = $sidebar.offset(),
        rightDelta = $("#footer").offset().top - $("#header").offset().top - $("#header").outerHeight() - $("#right").outerHeight(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > rightOffset.top) {
            $sidebar.stop().animate({
                marginTop: Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta)
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

更新的小提琴

实际上，您可以使用Math.min()andMath.max()组合使滚动处理程序成为单语句函数：

$(function() {
    var $sidebar = $("#right"), 
        $window = $(window),
        rightOffset = $sidebar.offset(),
        rightDelta = $("#footer").offset().top - $("#header").offset().top - $("#header").outerHeight() - $("#right").outerHeight(),
        topPadding = 15;

    $window.scroll(function() {
            $sidebar.stop().animate({
                marginTop: Math.max(Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta), 0)
            });
    });

});

更新的小提琴