MoreLesson 217Free preview

Shrink Header on Scroll

This lesson is part of How To · All levels

Summary

Shrink header on scroll is a technique of shrinking header as the user scrolls down, so that the content space increases. JavaScript adds a class to the header when it passes the scroll threshold, and then CSS changes the padding, height, or font size with transition. The effects should be smooth and not make navigation difficult to use.

Key points

Detect the scroll position and then add a class like .shrink to the header
Animate padding, font-size, or high with transition
Do not minimize the interactive elements to make it difficult to click or touch
Restrictions on changes to property that do not trigger over-lays

Full lesson

Code examples and quizzes

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