Just get rid of the damn headers. Users don't want them. They are just misguided ways of trying to raise retention, but really what they do is make your site less pleasant to use, which then makes me not want to come back later.
Are there any stats that prove this? I see this repeated time and time again on HN but I'm yet to see evidence that (a meaningfully significant number of) users are turned off by headers like this, while I have seen evidence that it increases engagement rates. It's used in both Chrome on Android and Safari on iOS, so I don't think it's an alien concept at this point.
Really?
You're basically looking at picture #3 from the left: http://i0.wp.com/www.stephenblower.co.uk/wp-content/uploads/...
Do you need "stats" to prove the absurdity of headers that disappear when you scroll?
You made a claim about "users". Data to support it would be nice.
Downside: unusual behaviour. Users fully understand how to scroll to the top of a page to find the header. This hack already requires them to scroll up to get to the header. Also, there's a decent chance that if you're trying to find the header that you're going to leave the page, so it doesn't matter if you lose your spot.
It's a cutesy feature, but it's cumbersome and pointless, and doesn't add any real usability (unless you count getting rid of fixed headers, which also don't add any real usability).
In short, this element feels always somewhat out of user's control.
Much more usable on mobile would be putting such navigation in a kind of sidebar that many apps already employ (often accessible by swiping from the left edge of the screen), while on desktop a great solution is simple “top” links, strategically placed.
Plain fixed headers, possibly somewhat collapsing in height as you scroll, also seem better than vanishing headers from the point of control.
Unless there comes out some positive research on usability of this particular UI element, I personally am not convinced.
> Plain fixed headers, possibly somewhat collapsing in height as you scroll, also seem better than vanishing headers from the point of control.
Also, it's worth noting, that whilst the obvious use-case for the lib is headers; it can be used on any element, to have it react to scroll direction and distance. For instance, I've used it to make a sidebar fixed after scrolling past a certain point on the page (classic sticky sidebar pattern). Also, I've used it to only show a "back to top" link when a user is > 50% down the page and scrolling up quickly - so unless you're deep in a page and scrolling towards the top, the link will never be visible/distracting.
It works well for these scenarios too!
I've just stated a tautology, so I'm missing something.
EDIT I'm seriously wondering whether this whole thing is a joke I'm not getting. Is there a jQuery plug-in that lets me click on text to go to other pages, too?
Edit: it's not a joke, it's an established pattern found on both iOS and Android.
Slightly interesting backstory with android: this effect was originally added to the stock browser on android 3.0. I loved how the tiny enhancement gave me more screen real estate, so I decided to build a JS lib to emulate the effect. The pattern didn't make it into the original chrome for Android, but after I mentioned it to Paul Irish he made it happen there too :)
Instead, when you begin to scroll to the top you can see the top. If you have an iphone, it's navbar behavior is identical to this.
Let's not be obtuse, yeah?
on the iPhone you can just double tap the top of the screen to scroll to the top quickly.
I've seen headers that stay on-screen while scrolling; even on huge displays they annoy me, so kudos to the author for the effort and putting it out there, but I can't help but feel like he just hit a windmill full tilt.
Edited to reduce inflammation.
There's no "Home" key on your phone that instantly takes you to the top of the page. Scrolling and scrolling and scrolling is annoying.
The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile
There is, at least on iOS. You can tap the status bar and it will quickly jump to the top of the page.
On iOS: tap on the system menu at the very top of the screen.
All it does is add and remove classes. It can be as responsive or unresponsive as you like with @media rules.