JQuery animate 在 Firefox 中不起作用答案

【问题标题】：JQuery animate is not working in firefoxJQuery animate 在 Firefox 中不起作用
【发布时间】：2014-07-02 22:18:16
【问题描述】：

我有 Jquery 脚本在一个页面上播放导航栏动画并在另一个页面上禁用它。它适用于chrome，但不适用于firefox。这是我的代码：

var URL = window.location.pathname;
URL = URL.split("/");
if(URL[1] != 'holiday') {
    $('.navbar').addClass('hide-menu');
    $(window).scroll(function() {
        slider();
    });
} else {
    $(".navbar").addClass('show-menu');
}

滑块功能：

function slider() {
    if (document.body.scrollTop > 500)
        $('.navbar').stop().animate({
            "margin-top" : '0'
        });
    else
        $('.navbar').stop().animate({
            "margin-top" : '-150px'
        });
}

CSS：

.show-menu {
    margin-top: 0px; 
}
.hide-menu {
    margin-top: -150px;
}

Firefox 隐藏菜单但无法播放动画并显示菜单。有什么建议吗？谢谢

【问题讨论】：

试试：window.scrollTop > 500
@A.Wolff 抱歉，现在这两种浏览器都不能正常工作。
你能把这个放在fiddle来演示这个问题吗，不用担心url部分

标签： javascript jquery css firefox

【解决方案1】：

您必须从实际具有滚动条的元素中获取滚动量。 Firefox 认为这是 <html> 元素。

您可以将所有内容包装在设置了overflow: auto 的容器中，然后将其用作检查滚动量以及放置滚动事件处理程序的位置。 Here's a jsbin.

<body>
  <div id=everything>
    <div class=navbar>
      HELLO WORLD
    </div>
    <!-- content ... -->
  </div>
</body>

和 CSS：

html, body { height: 100%; padding: 0; margin: 0; }

#everything { height: 100%; overflow: auto; }

【讨论】：