Question

我发现以下脚本使菜单在滚动时在屏幕后面有一个平滑的动画。

然而，它正在推倒页脚，导致页面高度扩大而没有更多内容。如何在页脚与页脚碰撞时停止滚动？

以下是代码：

$(function() {

    var $sidebar   = $("#indhold_right"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            }, "fast");
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

Answer 1

让我们退后一步，看看为什么会发生这种情况。当您滚动$window.scrollTop()和offset.top时，两者都会发生变化。但是，前者总是大于后者。因此，每次滚动时，if条件的计算结果为true，并且您正在调用animate函数。你没有停下来。

我们如何制止？通过一个停止检查，超出该检查，你没有动画。当页面加载时，获取$("#footer").offset().top，这是您启动时的页脚高度。因此，检查是针对$window.scrollTop()，这应该小于页脚顶部。

检查是否有效？是的，但它不会令人愉快（除非你想要那样），因为你的侧栏有高度，只有在你的侧边栏顶部达到页脚高度（停止）后停止才有效。因此，只需将侧边栏高度添加到停止位置即可。这不会100％准确，会有填充，边距和其他在此止损中没有计算的东西，但看起来相当不错，我想，你可以从那里继续。

在我给你代码答案之前，请看一下http://sscce.org/（如@Zeta所述）。总是遵循这个。我有一段时间和好心情。否则我甚至都不会看。

以下是代码。工作示例 - http://jsfiddle.net/H3Dqr/

$(function() {

    var $sidebar = $("#indhold_right"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 0,
        stop = $("#footer").offset().top;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            if ($window.scrollTop() + $sidebar.height() < stop) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                }, "fast");
            }
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

Jquery DIV碰撞

1 个答案: