Reputation: 13
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
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