YogeshChauhan . com

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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

SQL Right JoinSQL/MySQLCheck if any column has NULL values in PostgresPostgresAngular 9 time clock update every minute, second, hourAngularHow to add Go Back button in Swift 5?SwiftHow to Block IPs and User Agents using code in Drupal or WordPress?DrupalRecursive WITH Queries in Postgres (Common Table Expressions)Postgres