The basic idea is to make use of position property from CSS and scrollY property of window interface from JavaScript.
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.
Give the elements attributes like ID and class so that we can style them using CSS and get the menu using JavaScript.
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.
I have top property set as 0 for the menu as well since I am sticking it to the top part. You can be flexible and set it to a bottom part and then change the login in the JavaScript to make that work.
transition property plays an important roles too since you’d want to make the toggle transition smoother.
Step 3: JavaScript
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
