Live data from Hacker News

Headroom.js – hide your header on scroll

wicky.nillia.ms

51–60 of 99 posts

Re: Headroom.js – hide your header on scroll

#51
post #20

Earlier quoted context omitted.

Doesn't work for me on Android 4.2. Edit: version 4.2 Android Browser. I scrolled a good enough distance down the page.

Maybe you need a polyfill or something? Those Android browsers are the new IE.

Correct, a number of polyfills are needed for older browsers - requestAnimationFrame, Function.prototype.bind and classList. This is detailed in the "browser support" section of the website

Re: Headroom.js – hide your header on scroll

#53
post #24
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.

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?

Re: Headroom.js – hide your header on scroll

#54
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?

I'm glad I'm not the only one; when I saw the headline I thought "this fix wouldn't be necessary if people just used static pages in the first place."

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.

Re: Headroom.js – hide your header on scroll

#55
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)

I don't like the web now... grumps

Re: Headroom.js – hide your header on scroll

#56

Earlier quoted context omitted.

It's pretty nice. In my ipad the header only shows/hides if I scroll up/down AND stop touching the screen. Maybe that needs to be changed.

Unfortunately, this is a limitation of the scroll event on iOS. It does not given intermediate results - like it's debounced - only firing the scroll event when scrolling has stopped. This is a well-documented shortcoming of iOS. As Apple puts it [0], "One-finger panning doesn’t generate any events until the user stops panning—an onscroll event is generated when the page stops moving". There is no workaround at the m…

[deleted]

Re: Headroom.js – hide your header on scroll

#57

Earlier quoted context omitted.

It's pretty nice. In my ipad the header only shows/hides if I scroll up/down AND stop touching the screen. Maybe that needs to be changed.

Unfortunately, this is a limitation of the scroll event on iOS. It does not given intermediate results - like it's debounced - only firing the scroll event when scrolling has stopped. This is a well-documented shortcoming of iOS. As Apple puts it [0], "One-finger panning doesn’t generate any events until the user stops panning—an onscroll event is generated when the page stops moving". There is no workaround at the m…

I remember coming across this limitation while working on a canvas drawing mobile app. The work around was binding to touchmove, keeping a buffer of previous touchX and touchY values and then measuring the gradient of change for the values. If the gradient was mostly flat for both X and Y in a given window of touch movements you can assume the scroll has stopped even though the finger has not been lifted.

Here is a jsfiddle which approximates the solution. [0] This is a very quick reconstruction of the code and has some heuristic values which I remember tuning to get the best response on the ipad. As an aside, this one has the mouse move event mapped too. But i have never found it very reliable with the same tolerance settings as touchmove.

Sorry if this is useless code info. just thought of sharing.

[0]http://jsfiddle.net/R6yLb/3/

Re: Headroom.js – hide your header on scroll

#58

Earlier quoted context omitted.

It's pretty nice. In my ipad the header only shows/hides if I scroll up/down AND stop touching the screen. Maybe that needs to be changed.

Unfortunately, this is a limitation of the scroll event on iOS. It does not given intermediate results - like it's debounced - only firing the scroll event when scrolling has stopped. This is a well-documented shortcoming of iOS. As Apple puts it [0], "One-finger panning doesn’t generate any events until the user stops panning—an onscroll event is generated when the page stops moving". There is no workaround at the m…

wiresurfer, don't understand why you were down voted into oblivion, but now I can't reply to you. Anyway, massive thanks for that, really helpful starting point

Re: Headroom.js – hide your header on scroll

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

I liked the ExtJS4 implementation most.

They kept the data in a div with hidden overflow so you could alway see header and footer (not that useful for mobile).

But they also deleted old nodes when they were far enough away from the visible space in the div.

Re: Headroom.js – hide your header on scroll

#60

Earlier quoted context omitted.

Unfortunately, this is a limitation of the scroll event on iOS. It does not given intermediate results - like it's debounced - only firing the scroll event when scrolling has stopped. This is a well-documented shortcoming of iOS. As Apple puts it [0], "One-finger panning doesn’t generate any events until the user stops panning—an onscroll event is generated when the page stops moving". There is no workaround at the m…

wiresurfer, don't understand why you were down voted into oblivion, but now I can't reply to you. Anyway, massive thanks for that, really helpful starting point

Till the time its seen by the right pair of eyes :) Will try and see if I can fork a version and add the "inferred " touchend hack to it. Have a good day.
Post reply on HN