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”
Reference links:
- 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
A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.
Latest posts by Ranjith kumar (see all)
- Flutter lookup failed in @fields error (solved) - July 14, 2023
- Free open source alternative to Notion along with AI - July 13, 2023
- Threads API for developers for programmatic access - July 12, 2023