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 want them.
Headroom.js – hide your header on scroll
41–50 of 99 posts
Re: Headroom.js – hide your header on scroll
#42Earlier quoted context omitted.
To only engage the header when you're scrolling up? Identical to the way Safari on iOS handles it.
And this is good because? I don't get the point of this, you get pretty much the same thing by doing nothing. Fix the menu to the top of the page, when you scroll down it goes away, scroll back up and there it is. Almost no one is going to care that they'll need to scroll back to the top, I'm sure of it.
Because apparently we've run out of hard problems to solve in computing (as demonstrated by the amount of useless stuff we create) and need to think of the next UX trend that will give our users 0.0001% more satisfaction and increase productivity by 0.000009%.
Re: Headroom.js – hide your header on scroll
#43Whether or not you are a fan of disappearing/reappearing headers, this is clearly a well-thought-out bit of code that will be useful to someone. The docs also appear clear and concise.
I like that it is not a jQuery plugin by default, but does provide the option. Even better (for me) is an Angular directive ready for immediate integration.
Well done and keep up the good work!
Re: Headroom.js – hide your header on scroll
#44When 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.
Re: Headroom.js – hide your header on scroll
#45I've previously submitted this link, but given the interest in the pattern with yesterday's article [0] I thought it appropriate to post again. Hopefully someone finds it useful. Happy to answer any and all questions [0] https://news.ycombinator.com/item?id=7799687
while reading the source for implementation, as a non-primary JS developer, I can't help but think that the actual functionality could be implemented in around 10 lines of code if we remove all js oo-ization and customization code.. actually I need the minimum lines of code to implement this inside to paste in my project.. any help would be appreciated..
It started out a lot smaller! But as with most code, it starts out nice and pretty but get disfigured over time as corner cases and bugs are unearthed. There is also some necessary ceremony when dealing with scroll events to ensure good perf, otherwise you end up with stuttery scrolling which will annoy users to no end.
However, my plan has always been to trim the fat for the next release. I won't drop any features, but I'll definitely drop bytes! Feel free to fork and strip out any code you don't need though
Re: Headroom.js – hide your header on scroll
#46Whether or not you are a fan of disappearing/reappearing headers, this is clearly a well-thought-out bit of code that will be useful to someone. The docs also appear clear and concise. I like that it is not a jQuery plugin by default, but does provide the option. Even better (for me) is an Angular directive ready for immediate integration. Well done and keep up the good work!
This is my preferred way of developing JS stuff. Build an object that you can use in pure JS, then integrations with other frameworks are nothing more than simple wrappers around that object. Check the code for the jQuery plugin [0], it's tiny!
By the way, I'm not an angular user, the directive was added through a PR. If you hit any problems or have any suggestions to improve it, please get in touch on github!
[0] https://github.com/WickyNilliams/headroom.js/blob/master/src...
Re: Headroom.js – hide your header on scroll
#47Earlier 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 :)
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.
Re: Headroom.js – hide your header on scroll
#48Great 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
#49Just 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
Re: Headroom.js – hide your header on scroll
#50Here is an example with bootstrap 3 http://firestartr.co/