Line 3: | Line 3: | ||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
− | // When the user scrolls | + | // When the user scrolls the page, execute myFunction |
− | + | window.onscroll = function() {myFunction()}; | |
− | window.onscroll = function() { | + | |
− | + | // Get the navbar | |
− | + | var navbar = document.getElementById("topnav"); | |
− | + | ||
− | + | ||
+ | // Get the offset position of the navbar | ||
+ | var sticky = navbar.offsetTop; | ||
+ | |||
+ | // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position | ||
+ | function myFunction() { | ||
+ | if (window.pageYOffset >= sticky) { | ||
+ | navbar.classList.add("sticky") | ||
+ | } else { | ||
+ | navbar.classList.remove("sticky"); | ||
+ | } | ||
} | } | ||
+ | |||
Revision as of 12:45, 6 October 2018