Headroom.js – hide your header on scroll
wicky.nillia.ms
Headroom.js – hide your header on scroll
1–10 of 99 posts
Re: Headroom.js – hide your header on scroll
#2I'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
Re: Headroom.js – hide your header on scroll
#3I'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
Thanks for posting it...I think we've reached a point where there are so many good libraries on Github that even a 1,000+ star repo may be unknown to many of the people who would find it useful. This is something I would've tried to build on my own...but after seeing a repo with not only 3,000+ stars, which is more than the number of the library's bytes (in development), but also fewer than 5 open issues out of 60+...I'm happy to just use your solution. Nice work!
Re: Headroom.js – hide your header on scroll
#4I'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
Thanks for posting it...I think we've reached a point where there are so many good libraries on Github that even a 1,000+ star repo may be unknown to many of the people who would find it useful. This is something I would've tried to build on my own...but after seeing a repo with not only 3,000+ stars, which is more than the number of the library's bytes (in development ), but also fewer than 5 open issues out of 60+.…
I agree. I am continually finding repos on github that are massively popular, yet I've never come across them.
Does anyone know any sites which are devoted to curating high-quality repos on github/elsewhere¹? Obviously high quality is a subjective metric, but some mix of popularity, file size, whether under active development, number of issues etc. should suffice. GitHub's explore feature is too time-sensitive to use for this purpose.
¹ I know there's unheap.com, but that's focussed specifically on jQuery plugins. I'm thinking something broader, any language, different parts of the stack etc
Re: Headroom.js – hide your header on scroll
#5I'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
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.
Re: Headroom.js – hide your header on scroll
#6Didn'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!
Re: Headroom.js – hide your header on scroll
#7I'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
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 moment.
[0] https://developer.apple.com/library/safari/documentation/app...
Re: Headroom.js – hide your header on scroll
#8Didn'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 :)
Re: Headroom.js – hide your header on scroll
#9From the tagline, I thought this was a joke.. since "hide your header on scroll" implies default browser behaviour (i.e. position:static)
Re: Headroom.js – hide your header on scroll
#10Didn'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 :)
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 warrant header hide/show.