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
- 5 easy ways to center an element with CSS - April 5, 2022
- How to add participants to a WhatsApp group using whatsapp-web.js - March 31, 2022
- How to send a PDF to multiple contacts/groups using WhatsApp API - March 29, 2022