Question

我非常擅长编码并具备基本知识。我正在做一个简单的单页网站并且使用了一些jquery来制作顶部导航栏，只有在向下滚动到页面的顶部元素（＆＃39;登录页面＆＃39;）之后才会出现 - 为了拥有一个更清洁的着陆页＆＃39;。

（我已经使用这种方法而不是滚动过去固定的px值，因为它需要在媒体查询触发时适应网站的移动版本）

直到我在Firefox中尝试它才能很好地工作 - 然后没有任何反应。现在完全迷失了。

下面是我通过stackoverflow找到的原始代码，并略有改编。

提前谢谢你！

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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;

这是一个小提琴：https://jsfiddle.net/willemo/fyury33p/2/

.onscroll jquery在firefox中不起作用

1 个答案: