Javascript Jquery DIV冲突

我发现下面的脚本可以使菜单在滚动时沿着屏幕平滑显示动画

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

代码如下：

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

});

---

让我们后退一步，看看为什么它会以这种方式发生。 当您滚动

$window.scrollTop（）

和

offset.top

时，两者都会发生变化。然而，前者总是大于后者。因此，每次滚动时，if条件的计算结果为true，并且您正在对其调用animate函数。你没有止步

我们该如何停止？通过放置一个停止检查，超过该检查，您不会设置动画。加载页面时，获取

$（“#footer”）.offset（）.top

，这是开始时的页脚高度。因此，检查是针对

$window.scrollTop（）

，它应该小于页脚顶部

那支票行吗？是的，但这不会令人愉快（除非你想这样做），因为你的侧边栏有高度，只有当你的侧边栏顶部达到页脚高度（停止）后，停止才会工作。因此，只需将侧边栏高度添加到您的站点。这将不是100%准确，将有填充，利润率，和其他东西，没有考虑在这一站，但它看起来相当不错，我认为，你可以继续从那里

在我给出代码答案之前，请看一下（正如@Zeta所提到的）。始终遵循这一点。我有一些时间和好心情。否则的话，我连看都不会看

下面是代码。工作示例-

$（函数（）{
变量$sidebar=$（“#indhold_right”），
$window=$（window），
偏移量=$sidebar.offset（），
加起来等于0，
停止=$（“#页脚”）.offset（）.top；
$window.scroll（函数（）{
if（$window.scrollTop（）>offset.top）{
如果（$window.scrollTop（）+$sidebar.height（）

由于这是一个非常特殊的问题，您应该发布标记和样式表，或者提供页面的URL。如果这两种方法都不适用于您，则提供一个显示错误的示例。你可以用这个，我以后会记住的。你的例子是正确的，但它不起作用。但是在JSFIDLE上，它正常工作。在第36行的

testing.php

中有

Uncaught SyntaxError:Unexpected token-invalible

。

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

});​