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
- 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