MenusLesson 34Free preview

Shrink Navbar on Scroll

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of the Shrink Navbar on Scroll. When at the top of the page, the navbar appears wide with a large logo and a wide padding. As users begin to scroll down, the padding and logo size shrink gracefully so that the menu bar becomes more compact.

Key points

Listen to the event scroll to detect thresholds (e.g.: scrollTop > 80px)
Breathing the navbar padding from 80px 10px to 30px 10px
Reducing font or logo size from 35px to 25px simultaneously
Apply CSS transition: 0.4s to padding and font-size to make changes seamless

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.