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.
Headroom.js – hide your header on scroll
51–60 of 99 posts
Re: Headroom.js – hide your header on scroll
#52Great job! How about adding an option of showing the header when the users moves the cursor to the top of the window? Just like http://lyst.com are doing it.
Re: Headroom.js – hide your header on scroll
#53Just 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…
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
#54Earlier 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'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
#55Just 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
#56Earlier 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…
Re: Headroom.js – hide your header on scroll
#57Earlier 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…
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.
Re: Headroom.js – hide your header on scroll
#58Earlier 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…
Re: Headroom.js – hide your header on scroll
#59FYI, 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.
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
#60Earlier 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