Question

我有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会隐藏菜单，但无法播放动画并显示菜单。有什么建议吗？感谢

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

JQuery动画在Firefox中不起作用

1 个答案: