Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scroll Event Navigation Example</title> <style> #navbar { position: fixed; top: 0; width: 100%; background-color: #333; color: white; text-align: center; padding: 10px; transition: top 0.3s; } body { padding: 0; margin: 0; height: 1500px; /* to ensure scrolling */ font-family: Arial, sans-serif; } </style> </head> <body> <div id="navbar">Navigation Bar</div> <script> let lastScrollTop = 0; window.addEventListener('scroll', function() { let currentScroll = window.pageYOffset || document.documentElement.scrollTop; if (currentScroll > lastScrollTop) { document.getElementById('navbar').style.top = "-50px"; // Adjust based on nav height } else { document.getElementById('navbar').style.top = "0px"; } lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling }, false); </script> </body> </html>