MenusLesson 32Free preview

Slide Down Bar on Scroll

This lesson is part of How To · All levels

Summary

This lesson reviews the making of Slide Down Bar on Scroll. This component is hidden by default when the user is at the top of the page, and it slides smoothly down from the top of the screen when the user scrolls down through a certain threshold.

Key points

Listen to the event scroll on the window
Check the position of the browser scroll using document.documentElement.scrollTop
Set style.top = "0" if the scroll is > 20px, or style.top = "-50px" if the scroll is back upwards
Apply CSS transition: top 0.3s for smooth vertical shift animation

Full lesson

Code examples and quizzes

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