FYI, this UI pattern is called "Quick Return" : http://www.androiduipatterns.com/2012/08/an-emerging-ui-patt... I had been looking for this pattern's name after having seen Chrome on Android implementing it for their navbar. I find it useful on mobile where scrolling a long distance can be laborious.
Headroom.js – hide your header on scroll
31–40 of 99 posts
Re: Headroom.js – hide your header on scroll
#32Earlier quoted context omitted.
Actually, it's not as bad as the headline implies. Header stays hidden once it disappears, giving you the entire screen to read, but if you scroll up a bit it appears again, so you can use it to navigate. It acts the same as iOS Safari header - once you get used to it, it's really nice.
A completely static site also has this property. When I scroll to the top, I can see the top. When I scroll away from the top, I cannot see the top. 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?
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.
Re: Headroom.js – hide your header on scroll
#33Earlier quoted context omitted.
Actually, it's not as bad as the headline implies. Header stays hidden once it disappears, giving you the entire screen to read, but if you scroll up a bit it appears again, so you can use it to navigate. It acts the same as iOS Safari header - once you get used to it, it's really nice.
A completely static site also has this property. When I scroll to the top, I can see the top. When I scroll away from the top, I cannot see the top. 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?
Re: Headroom.js – hide your header on scroll
#34Earlier quoted context omitted.
Actually, it's not as bad as the headline implies. Header stays hidden once it disappears, giving you the entire screen to read, but if you scroll up a bit it appears again, so you can use it to navigate. It acts the same as iOS Safari header - once you get used to it, it's really nice.
A completely static site also has this property. When I scroll to the top, I can see the top. When I scroll away from the top, I cannot see the top. 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 :)
Re: Headroom.js – hide your header on scroll
#35I've previously submitted this link, but given the interest in the pattern with yesterday's article [0] I thought it appropriate to post again. Hopefully someone finds it useful. Happy to answer any and all questions [0] https://news.ycombinator.com/item?id=7799687
Re: Headroom.js – hide your header on scroll
#36Just 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.
Re: Headroom.js – hide your header on scroll
#37What's the point of this?
To only engage the header when you're scrolling up? Identical to the way Safari on iOS handles it.
I don't get the point of this, you get pretty much the same thing by doing nothing. Fix the menu to the top of the page, when you scroll down it goes away, scroll back up and there it is. Almost no one is going to care that they'll need to scroll back to the top, I'm sure of it.
Re: Headroom.js – hide your header on scroll
#38Earlier quoted context omitted.
A completely static site also has this property. When I scroll to the top, I can see the top. When I scroll away from the top, I cannot see the top. 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?
> When I scroll to the top, I can see the top. 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. http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
Re: Headroom.js – hide your header on scroll
#39Earlier quoted context omitted.
A completely static site also has this property. When I scroll to the top, I can see the top. When I scroll away from the top, I cannot see the top. 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?
The point is that you should not have to scroll all the way to the top to see the header. Tools like headroom.js add predictive behavior to your site to improve user experience. I personally really appreciate sites that have it.
Re: Headroom.js – hide your header on scroll
#40Earlier quoted context omitted.
To only engage the header when you're scrolling up? Identical to the way Safari on iOS handles it.
And this is good because? I don't get the point of this, you get pretty much the same thing by doing nothing. Fix the menu to the top of the page, when you scroll down it goes away, scroll back up and there it is. Almost no one is going to care that they'll need to scroll back to the top, I'm sure of it.