.onscroll jquery 在 Firefox 中不工作

Question

我对编码还很陌生，有一些基础知识。我正在做一个简单的单页网站，并使用了一些 jquery 来使顶部导航栏仅在向下滚动到页面的顶部元素 ('landing page') 之后出现 - 按顺序有一个清洁工 'landing page'.

（我使用了这种方法而不是 scroll-past-fixed px 值，因为它需要在媒体查询触发时适应网站的移动版本）

在我在 Firefox 中尝试它之前，它工作得非常好 - 然后没有任何反应。现在完全迷失了。

下面是我通过Whosebug找到的原代码，稍作改编。

提前致谢！

window.onscroll = function (oEvent) {
  var mydivpos = document.getElementById("intro").offsetTop;
  var scrollPos = document.getElementsByTagName("body")[0].scrollTop;
  
  if(scrollPos >= mydivpos)
    document.getElementById("bottomMenu").className = "";
  else
    document.getElementById("bottomMenu").className = "hidden";
};

#bottomMenu {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 64px;
  border: 4px solid #000;
  background: white;
  z-index: 100;
}



.hidden { 
  display: none; 
}

<!DOCTYPE html>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>test</title>
<style id="jsbin-css">

</style>
</head>
<body>
  
  <div id="bottomMenu" class="hidden">HELLO</div>
  a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
  <div id="intro">MYDIV</div>
  a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
  
  
</body>
</html>

Answer 1

我相信 document.getElementsByTagName("body")[0].scrollTop（或 document.body.scrollTop）已被弃用，但一些浏览器仍然依赖它。

如果您更改此行，您的解决方案在 Firefox 上运行良好：

 var scrollPos = document.getElementsByTagName("body")[0].scrollTop;

为此：

var scrollPos = document.documentElement.scrollTop;

但它在 Chrome 中不再起作用。所以你需要这样做：

var scrollPos = document.documentElement.scrollTop || document.body.scrollTop;

这是一个fiddle：https://jsfiddle.net/willemo/fyury33p/2/

.onscroll jquery 在 Firefox 中不工作

.onscroll jquery not working in firefox

firefox

onscroll