I am looking for examples of the effect used mostly in mobile design, where by scrolling down the navbar hides from view, and by scrolling up again it returns in view.

Does this effect have a specific name?

  • 1
    "Annoying". You scroll down, realize you've gone a bit too far, scroll back up -- and have the thing you were trying to see go from "almost visible" to "solidly hidden".
    – Mark
    Commented Sep 9, 2021 at 20:24

2 Answers 2


This types of NavBars are known as Pit bars according to this answer.

  • 2
    That's an interesting name. I would have never guessed :D
    – Adriano
    Commented Sep 9, 2021 at 7:17

I found 2 good examples:

  1. Show & Hide Navbar on Scroll - Webflow interactions and animations tutorial

  2. How to Hide a Navigation Bar When Scrolling Down - HTML, CSS & JavaScript Web Design Tutorial

But as far as know, this navbar doesn't have any specific name. I would call it the "Interactive navbar" because it describes the main mechanics — interactivity.

  • 1
    Would you happen to have some examples from Design System resources?
    – Adriano
    Commented Sep 9, 2021 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.