Hide header on scroll down, show the website header on scroll up. Learn how to hide header on scroll down and show header on scroll up!
Check out the full video below.
This is a common header effect used in most websites to give more space for the content by hiding the sticky header.
Headroom.js library helps to hide sticky header on scroll easily. You can hide header on scroll down with just 3 lines of code. This effect is also same as auto hide navbar on mobile view of the website.
This video is a part of the “Spotlight of the day series”
- Headroom.js github – https://github.com/WickyNilliams/headroom.js
- Headroom.js website – https://wicky.nillia.ms/headroom.js/
- Codepen example – https://codepen.io/Ranjithkumar10/pen/OJONRMd
Latest posts by Ranjith kumar (see all)
- Curved button using Flutter | Can it be done with Flutter? | Custom shapes Flutter | Custom painter - September 21, 2022
- Dynamic Island using Flutter | iPhone 14 Pro | Can it be done with Flutter? - September 14, 2022
- Best practices of scraping website data for beginners (Updated 2022) - September 12, 2022