Live data from Hacker News

Headroom.js – hide your header on scroll

wicky.nillia.ms

31–40 of 99 posts

Re: Headroom.js – hide your header on scroll

#31
post #26

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.

I guess "quick return" is a remedy for "infinite scroll" making you lose top and bottom navigational elements, too.

Re: Headroom.js – hide your header on scroll

#32
post #19

Earlier 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?

> 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

#33
post #19

Earlier 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?

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

#34
post #19

Earlier 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?

The easiest way to think of it is a halfway house between fixed and static. You get the benefits of static (maximising vertical screen space) while keeping the benefits of a fixed header (primary navigation always close to hand).

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

#35

I'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

while reading the source for implementation, as a non-primary JS developer, I can't help but think that the actual functionality could be implemented in around 10 lines of code if we remove all js oo-ization and customization code.. actually I need the minimum lines of code to implement this inside to paste in my project.. any help would be appreciated..

Re: Headroom.js – hide your header on scroll

#36
post #16

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.

I absolutely loathe fixed headers, but I think this script is pretty cool. The headers stay out of your way when you are reading, and when you actually want to use the navigation you don't have to scroll all the way to the top. I really see no downside, except "more JavaScript." (People who are complaining about JavaScript: you really aren't going to like the Web in 5 years)

Re: Headroom.js – hide your header on scroll

#37
post #29

What's the point of this?

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.

Re: Headroom.js – hide your header on scroll

#38
post #32

Earlier 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/

on the iPhone you can just double tap the top of the screen to scroll to the top quickly.

Re: Headroom.js – hide your header on scroll

#39

Earlier 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.

that's assuming I want to do navigation just because I started to scrollup, which is a flawed assumption.

Re: Headroom.js – hide your header on scroll

#40
post #29

Earlier 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.

From HN front page yesterday: http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
Post reply on HN