3 ms·

There are two kind of significant problems with headers that hide as you scroll, in my experience. 1) You can't easily get to the navigation when you do need it

There are two kind of significant problems with headers that hide as you scroll, in my experience. 1) You can't easily get to the navigation when you do need it—have to scroll up some uncertain amount that varies by site (this unknown makes simply using scrollbars more reliable)—and 2) you get it when you don't need it, as in you're simply scrolling back to reread a portion of the text above. In short, this element feels always somewhat out of user's control. Much more usable on mobile would be putting such navigation in a kind of sidebar that many apps already employ (often accessible by swiping from the left edge of the screen), while on desktop a great solution is simple “top” links, strategically placed. Plain fixed headers, possibly somewhat collapsing in height as you scroll, also seem better than vanishing headers from the point of control. Unless there comes out some positive research on usability of this particular UI element, I personally am not convinced.

WickyNilliams 12y ago
> Plain fixed headers, possibly somewhat collapsing in height as you scroll, also seem better than vanishing headers from the point of control. That's doable with this library btw. What happens in response to scrolling is entirely dependent on your CSS. So when scrolling down, have it apply a class which reduces the height, and when scrolling up, restore the height. Also, it's worth noting, that whilst the obvious use-case for the lib is headers; it can be used on any element, to have it react to scroll direction and distance. For instance, I've used it to make a sidebar fixed after scrolling past a certain point on the page (classic sticky sidebar pattern). Also, I've used it to only show a "back to top" link when a user is > 50% down the page and scrolling up quickly - so unless you're deep in a page and scrolling towards the top, the link will never be visible/distracting. It works well for these scenarios too!

WickyNilliams 12y ago

> Plain fixed headers, possibly somewhat collapsing in height as you scroll, also seem better than vanishing headers from the point of control. That's doable with this library btw. What happens in response to scrolling is entirely dependent on your CSS. So when scrolling down, have it apply a class which reduces the height, and when scrolling up, restore the height. Also, it's worth noting, that whilst the obvious use-case for the lib is headers; it can be used on any element, to have it react to scroll direction and distance. For instance, I've used it to make a sidebar fixed after scrolling past a certain point on the page (classic sticky sidebar pattern). Also, I've used it to only show a "back to top" link when a user is > 50% down the page and scrolling up quickly - so unless you're deep in a page and scrolling towards the top, the link will never be visible/distracting. It works well for these scenarios too!