MenusLesson 33Free preview

Hide Navbar on Scroll

This lesson is part of How To · All levels

Summary

This lesson reviews the making of the Hidden Navigation Bar on Scroll. This smart pattern maximizes the viewing area of the content when reading: the automatic navigation bar is hidden upward as the user scrolls down, and reappears as soon as the user scrolls upward.

Key points

Compare the current scrollpos with the previous scrollpos
If prevScrollpos > currentScrollpos (scroll up), set style.top = "0"
If prevScrollpos < currentScrollpos (scroll down), the set style.top = "-50px"
Apply CSS transition: top 0.3s to make animation hide and appear natural

Full lesson

Code examples and quizzes

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