How to Hide the NavBar on Scroll

A good way to improve the user experience when reading articles on your site is to hide the navbar when the user scrolls down. This way there will be fewer distractions while reading (especially on mobile screens).

In this tutorial, I'll show you how to use JavaScript to hide the navbar when scrolling down and show it when scrolling up.

[aro]

here is the shorter version:

const nav =

let lastScrollPosition = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.scrollY;
nav.classList.toggle('hidden', currentScroll > lastScrollPosition);
lastScrollPosition = currentScroll;
});

[AnonymousPumpkin]

what is the font you are using in the vs code that js you are writing is appearing cursive

[zgazenamacka]

Let's say my windows mouse settings scroll is set to 4 lines per scroll and yours is 10 lines per scroll. How JS counts that scroll, is one scroll counted by lines per scroll from windows settings or each scroll adds 1?