phillip
phillip

Reputation: 13

.onscroll jquery not working in firefox

I'm VERY new to coding and have a basic knowledge. I'm doing a simple one-page site and have used a bit of jquery to make a top nav-bar appear only after scrolling down past the top element ('landing page') of the page - in order to have a cleaner 'landing page'.

(I've used this approach instead of the scroll-past-fixed px value, as it needs to adapt to the mobile version of the site when triggered by media query)

This works beautifully until I try it in Firefox - then nothing happens. Totally lost now.

Below is the original code that I found through stackoverflow and have adapted slightly.

thank you in advance!

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>  

Upvotes: 1

Views: 263

Answers (1)

willem
willem

Reputation: 27027

I believe document.getElementsByTagName("body")[0].scrollTop (or document.body.scrollTop) is deprecated, but some browsers still rely on it.

Your solution works fine on Firefox if you change this line:

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

To this:

var scrollPos = document.documentElement.scrollTop;

But then it does not work in Chrome anymore. So you need to do this:

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

Here is a fiddle: https://jsfiddle.net/willemo/fyury33p/2/

Upvotes: 1

Related Questions