top bar hides as you start to scroll down

[clizlee]

I would like to add a feature to our website where if you scroll down the page the top bar will hide, but if you scroll back up the top bar shows again. On Foundation docs site (https://get.foundation/sites/docs/top-bar.html) it does this for the small breakpoint it looks like. If you resize your window to be for the small breakpoint then the whole top bar hides and shows as you move up or down the page. Is this something that can be added with Foundation? Is it one of the features that I'm just missing somewhere? If it is a Foundation feature, can someone point me to where it is? If not does anyone have a reference of how to do this?

[benthien]

If you merely insert a top bar in your html, the bar will scroll with page. To keep the top bar in place as you scroll you need to use the sticky plugin (see https://get.foundation/sites/docs/sticky.html#sticky-navigation).

[clizlee]

Yes I know that. I guess I didn't explain very well. I'm wondering how you auto hide the sticky nav bar when you scroll down and auto show the sticky nav bar if you scroll back up. I've seen some sites do this. I'm just not sure how to do it. If you see the Foundation docs on small screen or on a phone, the top nav bar does this. So just wondering if it's an option with the Foundation sticky or if it's another thing you have to add to get that functionality.

[benthien]

What you are looking for may be the Scroll Hiding Nav building block. Here is the link https://get.foundation/building-blocks/blocks/scrollhide-nav.htm

[clizlee]

Ah yes, that's it! Thank you!