0

我发现以下脚本可以使菜单在滚动时跟随屏幕平滑动画。

但是，它会向下推页脚，导致页面高度扩大而没有更多内容。当它与页脚碰撞时，如何让它停止滚动？

这是代码：

$(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
            });
        }
    });

});
4

1 回答 1

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

});​
于 2012-07-20T02:58:11.753 回答