Step 1: HTML
You need to have content larger than the browser window height otherwise you won’t be able to scroll and menu will be visible all the time.
Step 2: CSS
Let’s make everything look better using CSS. Also, you’d want to add position:fixed to the menu since we want it to kinda hang on to a specific part of the browser window.
transition property plays an important roles too since you’d want to make the toggle transition smoother.
Till this point, you can scroll the content but the menu is fixed. So, all you need to do is get the scrolling position of the window and then based on that show or hide the menu.
We can either use scrollY property or pageYOffset property. They both get you the scrolled value (in pixels) of the current document along the vertical axis.
hidden pageYOffset property scroll scrollY toggle transition window