Question

我有4个div（标题，左右内容和页脚）。我有right content滚动跟随，我想要发生的是当页脚顶部与right的底部相遇时，右边还与左div一起滚动。< / p>

我在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
            });
        }
    });

});

Updated fiddle

实际上，您可以组合使用Math.min()和Math.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)
            });
    });

});

Updated fiddle

（div滚动跟随）当div遇到另一个div时，（div滚动跟随）也与othere div一起滚动

1 个答案: