Yogesh Chauhan's Blog

How to hide and show menu on scroll using JavaScript and CSS?

in CSS & JavaScript on May 11, 2021

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.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What’s a Web Storage API in JavaScript?JavaScriptPostgreSQL transactions using the BEGIN, COMMIT, and ROLLBACK statements.PostgresHow to Display Related Posts in WordPress?WordPressHow to create Flickering Texts using CSS?CSSHow to Find the Highest (or Lowest) Number in an Array in JavaScript?JavaScriptRelative Length Units in CSSCSS