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

11–20 of 99 posts

Re: Headroom.js – hide your header on scroll

#11

Post by WickyNilliams »

thathonkey wrote: post #10
WickyNilliams wrote: post #8

Earlier quoted context omitted.

See my other response ( https://news.ycombinator.com/item?id=7805748 ). This is a shortcoming of iOS, it works perfectly on other platforms. IIRC, you reduce the tolerance value (an options you can pass to headroom) it will work on iOS also, it just isn't quite as sensitive as it should be. I'm waiting for my development iPhone to charge so I can confirm this. I'll report back :)

Ah. I'm not super familiar with that "bug" - is it that "touchmove" events don't get fired for single-finger scrolling (panning)? Perhaps you could make it work (albeit less gracefully) in iOS by reconciling the header visibility state once "touchend" finally gets fired though? Assuming "touchstart" gets fired as you'd expect, you can do a bit of manual calculation to determine if the y-position changed enough to war…

To be honest, when i first developed the library I didn't have an iOS device I could test with, so just went with the simplest solution (that is, not do anything :D). Also, I'd always kind of viewed it as a progressive enhancement - if it doesn't work, it's still a fully functional header.

However, now that I have an iOS device (which is still charging!), I should spend some time seeing if I can get it to work better there. I'll look at various touch events as you suggest. Currently it only listens to the scroll event

Re: Headroom.js – hide your header on scroll

#12

Post by WickyNilliams »

thathonkey wrote: post #6

Didn't work in iOS Chrome or Safari (the header remains fixed at the top regardless of scroll behavior). Cool effect for desktop but if you can get it working as a responsive solution I think it would be a lot more useful to people!

Just tested on iPhone and I can happily report that reducing the tolerance improves the situation. Though it still worked with a 5px tolerance. Also, note that there is an offset applied on the documentation, so the effect never kicks in until you've scrolled down > 200px

Re: Headroom.js – hide your header on scroll

#14

Post by WickyNilliams »

pyrocat wrote: post #13

Kind of odd that if you scroll slowly the header never disappears.

That's intentional actually :) The library allows you to supply a tolerance value, to reduce sensitivity of the effect. On the project site, I have it set to 5px (i.e. you must scroll > 5px for the effect to trigger). You can try out the various options in the interactive playground [0]

[0] http://wicky.nillia.ms/headroom.js/playroom/

Re: Headroom.js – hide your header on scroll

#16

Post by jblow »

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.

Re: Headroom.js – hide your header on scroll

#19

Post by DenisM »

jblow wrote: 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.

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.

Re: Headroom.js – hide your header on scroll

#20

Post by yogo »

WickyNilliams wrote: post #8
thathonkey wrote: post #6

Didn't work in iOS Chrome or Safari (the header remains fixed at the top regardless of scroll behavior). Cool effect for desktop but if you can get it working as a responsive solution I think it would be a lot more useful to people!

See my other response ( https://news.ycombinator.com/item?id=7805748 ). This is a shortcoming of iOS, it works perfectly on other platforms. IIRC, you reduce the tolerance value (an options you can pass to headroom) it will work on iOS also, it just isn't quite as sensitive as it should be. I'm waiting for my development iPhone to charge so I can confirm this. I'll report back :)

Doesn't work for me on Android 4.2.

Edit: version 4.2 Android Browser. I scrolled a good enough distance down the page.

Post reply on HN