Why an entire js dependency for what can be accomplished with 10 lines of jquery?
Isn't jQuery a huge dependency?
Headroom.js – hide your header on scroll
81–90 of 99 posts
Re: Headroom.js – hide your header on scroll
#82Just 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.
serious question: do you use the web much with on your phone? There's no "Home" key on your phone that instantly takes you to the top of the page. Scrolling and scrolling and scrolling is annoying. The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile
> The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile
All it does is add and remove classes. It can be as responsive or unresponsive as you like with @media rules.
Re: Headroom.js – hide your header on scroll
#83FYI, 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've seen it being referred to as "scroll up bar".
Re: Headroom.js – hide your header on scroll
#84I haven't tried it out, but this is how you make it work with bootstrap 3 http://stackoverflow.com/questions/20648451/how-do-you-use-h...
Thankyou so much for that.
I had got as far as including animate.css in trying to get things working and I was just about to write here about how it didn't bl00%y work!!! All is working now, thanks for your well-spotted tip.
Re: Headroom.js – hide your header on scroll
#85Earlier quoted context omitted.
serious question: do you use the web much with on your phone? There's no "Home" key on your phone that instantly takes you to the top of the page. Scrolling and scrolling and scrolling is annoying. The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile
> The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile All it does is add and remove classes. It can be as responsive or unresponsive as you like with @media rules.
precisely! or you can use matchMedia (or my lib enquire.js [0]) to selectively enable/disable the entire feature. This might be preferable than @media in your CSS, because it does away with scroll listeners where they're not needed.
Re: Headroom.js – hide your header on scroll
#86I don't like fixed headers at all and I dislike even more fixed headers that hide on scroll... it's too distracting and useless.
A couple of years ago, when fixed headers became "cool", I'd write scripts for Greasemonkey just to get rid of them. Today I'm too lazy for that :D.
But nice project.
Re: Headroom.js – hide your header on scroll
#87Earlier 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?
[deleted]
Re: Headroom.js – hide your header on scroll
#88I really, really like this behavior on mobile, especially on sites that dynamically load new content as I scroll down. I honestly don't understand the harsh criticism I'm seeing in the comments here, because this really is a super functional way of giving the user easy access to navigation controls without having to scroll all the way to the top of a page. That said, I suppose I can understand criticism if this were being used in cases where there generally wasn't a lot of content to scroll through. I guess my point is, like all design decisions, it completely depends on the use case as to whether or not this is useful or functional.
Re: Headroom.js – hide your header on scroll
#89Earlier quoted context omitted.
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.
There's no snapback to where you were reading if you double-tap the top. Which sucks and makes for a bad UX if you only need the top bar for a moment (for a share button, for example).
Re: Headroom.js – hide your header on scroll
#90FYI, 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.
Cool - do you (or anyone) have a favorite reference or catalog of UI patterns?