persistent nav below header for mobile (like iOS7 browser)

Question

This issue is giving me a serious headache and delaying my project because I cannot figure it out.

I am trying to create a mobile friendly website and am performing the tests in iOS7/OSX.

Basically I have a header, a nav below it, and below that all the content. When the user scrolls down, I want the header to smoothly to dissapear, and then the nav bar will clip (fix) to the top of the browser. So far this seems to be possible with only CSS3, but it isn't perfect, and javascript makes the nav bar "snap" to the browser once the scrolling has stopped. Furthermore, I would like to make it so when I scroll up, it will show the header, regardless if im in the middle, top, or bottom of the page. This works just like the header and footer in the iOS Safari browser. When you scroll down everything slides away, but then when you scroll back up, the footer and header reveal themselves.

I need to accomplish this, preferably without JS, but that doesnt seem possible.

So, can someone PLEASE show me or link me to a tutorial that can show me how this is done and what it is I exactly need? I would greatly appreciate it. And keep in mind it must work smoothly on mobile browsers.

Answer 1

Using position: sticky for the nav could be close to what you are after. It is supported by Safari in ios7 at least ( demo ). Try adding something like this to your nav:

.nav {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

For more complex behaviour, like the header appearing again when you are scrolling up, you will probably need to resort to javascript.