3 ms·

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

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!

WickyNilliams 12y ago
See my other response (https://news.ycombinator.com/item?id=7805748 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 :)
- thathonkey 12y ago
  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.
  - WickyNilliams 12y ago
    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
- yogo 12y ago
  Doesn't work for me on Android 4.2. Edit: version 4.2 Android Browser. I scrolled a good enough distance down the page.
  - hiphopyo 12y ago
    Maybe you need a polyfill or something? Those Android browsers are the new IE.
    - WickyNilliams 12y ago
      Correct, a number of polyfills are needed for older browsers - requestAnimationFrame, Function.prototype.bind and classList. This is detailed in the "browser support" section of the website
WickyNilliams 12y ago
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

WickyNilliams 12y ago

See my other response (https://news.ycombinator.com/item?id=7805748 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 :)

thathonkey 12y ago
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.
- WickyNilliams 12y ago
  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
yogo 12y ago
Doesn't work for me on Android 4.2. Edit: version 4.2 Android Browser. I scrolled a good enough distance down the page.
- hiphopyo 12y ago
  Maybe you need a polyfill or something? Those Android browsers are the new IE.
  - WickyNilliams 12y ago
    Correct, a number of polyfills are needed for older browsers - requestAnimationFrame, Function.prototype.bind and classList. This is detailed in the "browser support" section of the website

WickyNilliams 12y ago

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