Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Headroom.js – hide your header on scroll

wicky.nillia.ms

Post reply on HN
Print view View original

71–80 of 99 posts

Re: Headroom.js – hide your header on scroll

#71

Post by eropple »

hnriot wrote: post #38
sehr wrote: post #32

Earlier quoted context omitted.

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

And when I want to resume reading? What then?

Let's not be obtuse, yeah?

Re: Headroom.js – hide your header on scroll

#72

Post by eropple »

old-gregg wrote: post #53
untog wrote: post #24

Earlier quoted context omitted.

Just get rid of the damn headers. Users don't want them. 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…

> Are there any stats that prove this? 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?

Seeing as how they're a common (and, IMO, very pleasant) user interface idiom on mobile, I think it's very reasonable question to ask regarding the web.

You made a claim about "users". Data to support it would be nice.

Re: Headroom.js – hide your header on scroll

#76

Post by tomhschmidt »

cvrajeesh wrote: post #75

Completely hiding the main navigation bar - is this a UX problem?. Now I have to scroll back again to top just for seeing the navigation bar. Minor tweak will be to allow swiping from top to show it or when user moves mouse to top.

Did you even try it? The header reappears when you start scrolling up - no need to scroll back to the top.

Re: Headroom.js – hide your header on scroll

#77

Post by sredmond »

Zarkonnen wrote: post #44
keeran wrote: post #30

When I scroll away from the top of the page it makes the header disappear, then reappear when I scroll back up to the top of the page. Isn't that what scrolling does? :)

This is what scrolling does. But this option is fancier and IMHO pointlessly visually distracting.

I really enjoy this feature because it gives users who read long posts (especially on mobile) quick access to the navigation bar when they need it, but without the screen-hogging characteristic of older position:absolute nav-bars. With regards to the visual distraction, I find that I almost never scroll up unless I'm done reading. Continuously scrolling down feels natural, and in this case, the header will stay hidden regardless.

Re: Headroom.js – hide your header on scroll

#78

Post by benaston »

Great, so having previously suffered a rash of sites that permanently took up valuable vertical screen space with fixed headers, they now will all have headers that disappear whenever you scroll down and appear when you scroll up, with slightly buggy behavior on iOS. Has anyone considered what non-technical users will think of this UX idiom?

The effect is exacerbated on mobile devices whose browser chrome follows this very same idiom (for arguably better reasons - at least it's not buggy). So you now have two "competing" user interface effects.

Re: Headroom.js – hide your header on scroll

#79

Post by ajanuary »

eropple wrote: post #71
hnriot wrote: post #38

Earlier quoted context omitted.

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

And when I want to resume reading? What then? Let's not be obtuse, yeah?

What then? You tap the bottom of the screen to bring up the chrome instead.
Post reply on HN