My scenario involves a navigation bar embedded in the header that should become fixed at the top of the browser window when the document is scrolled down by a certain amount.
The script I have been using works well, but it causes an issue in Firefox and Chrome (not in Edge and IE11):
When the document is scrolled down and the navigation becomes fixed, if I reload the page using the browser's refresh button or the F5 key, or leave the page and then return, the navigation remains fixed in place.
I attempted to remove the ".fixed" class on every load event, but this approach does not work because there is no actual page reload happening.
It seems like this behavior can only be reproduced in a separate document?!
Does anyone have any suggestions on how I can resolve this problem?
var header, nav, navtop, verticalpos;
function fixed_nav() {
"use strict";
verticalpos = window.pageYOffset;
if (verticalpos >= navtop) {
nav.setAttribute('class', 'fixed');
} else {
nav.removeAttribute('class');
}
}
function init() {
"use strict";
header = document.getElementsByTagName('header')[0];
nav = header.getElementsByTagName('nav')[0];
navtop = nav.getBoundingClientRect().top;
}
window.addEventListener('load', init, false);
window.addEventListener('scroll', fixed_nav, false);* {
padding: 0px;
margin: 0px;
}
...
<!DOCTYPE html>
...