Hi all. I’m trying to get the navbar on my site to hide when the user scrolls down, and show when the user scrolls up. I have the custom code for this function
var prevScrollpos = window.pageYOffset;
var navbar = document.getElementById("navbar");
window.onscroll = function() {
console.log("window scrolled");
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
navbar.style.top = "0";
} else {
navbar.style.top = -navbar.offsetHeight + "px";
}
prevScrollpos = currentScrollPos;
}
I want to apply it to every single page of the site, so I went to the site settings and pasted it in the Footer Code section.
However, it didn’t work. I tested it for a bit and it seemed like the whole window.onscroll function was not being executed.
Weirdly enough, if I apply the code to individual pages before </body>
tag, or simply run it in the browser console, it’s working fine.
Any idea why I can’t apply the function to all pages in the site settings? Thanks!!
Here is my site Read-Only: LINK