Responsive Navbar with Hide on Scroll down and show on scroll up copy paste ready

In this example, we first define a constant variable navbar and a let variable lastScrollPosition to keep track of the user's scroll position. We then add an event listener for the scroll event on the window object.

Inside the event listener, we get the current scroll position using the window.pageYOffset property. We then check if the user has scrolled down or up (as determined by comparing the current scroll position to the previous position stored in the lastScrollPosition variable). If the user has scrolled down, we add the .hide class to the navbar element to hide it. Otherwise, we remove the .hide class to show it. We then update the lastScrollPosition variable for the next event.