It's worth noting that this solution will not work for anything using the relatively new `position: sticky`
> relatively new sticky has been around since at least 2014
Yet this blog post is from 2013, so relative to that, it's new.
Kill Sticky Headers (2013)
61–70 of 84 posts
Re: Kill Sticky Headers (2013)
#62Sticky headers aren't necessarily full-width, or overlapping the content, which invalidates most if not all of the criticism.
Eg. see the sticky headers in the mobile Google Calendar app (on Android at least).
Even in this very article, which self-referentially demonstrates how a sticky header gets in the way, there are sizeable margins on both sides of the text (something I'm personally not very fond of, but I digress).
Now, the sticky header, should it contain any useful information, could very well be moved to one of these empty areas, without obscuring the text, without disrupting the scrolling experience etc.
Re: Kill Sticky Headers (2013)
#63Sticky page headers are easy to implement and bad for UX. On the contrary, sticky table headers would be really helpful for long tables and it is impossible to implement them without compromises (fixed column width only, opaque background only or JS-only etc.)
Re: Kill Sticky Headers (2013)
#64Sticky headers aren't necessarily full-width, or overlapping the content, which invalidates most if not all of the criticism. Eg. see the sticky headers in the mobile Google Calendar app (on Android at least). Even in this very article, which self-referentially demonstrates how a sticky header gets in the way, there are sizeable margins on both sides of the text (something I'm personally not very fond of, but I digre…
> there are sizeable margins on both sides of the text (something I'm personally not very fond of, but I digress).
Really? I find having text flow to the full width of the browser to be harder to read. I think there should be some limit.
But I do like your idea of using that empty space when the browser is wide enough to make it available.
Re: Kill Sticky Headers (2013)
#65Sticky headers make me feel claustrophobic, I don't know why. Regardless of my screen height (it could be a 30" monitor), it feels like something is "stuck" to my browser that wasn't before and makes me feel anxious. Even without that feeling, sticky headers kill the feeling that I'm moving through a viewport of a webpage. It makes your website look like it's not of the "webpage" medium that I've been familiar with f…
I think the only time sticky headers are ever acceptable is when you need to regularly refer back to them. Long tables without sticky headers are the worst
Or use recfile syntax instead of a table.
Re: Kill Sticky Headers (2013)
#66Sticky page headers are easy to implement and bad for UX. On the contrary, sticky table headers would be really helpful for long tables and it is impossible to implement them without compromises (fixed column width only, opaque background only or JS-only etc.)
This is a real failure of browsers, by the way. The table HTML has all the semantic information necessary, browsers could use it to improve table usability (such as sticky headers) but none ever bothered to try.
Re: Kill Sticky Headers (2013)
#67Earlier quoted context omitted.
It's even worse when it only appears when you're scrolling up. You want to scroll up one line to re-read the sentence that scrolled off screen. Nope, now you have to scroll 50px because the navbar spawned. Oh, it's gone again. Nope, it's back, I didn't even mean to scroll up 1px that time. It's no wonder my girlfriend makes more than I do as a UX professional. Someone on the team that actually has the users' interest…
What’s funny, there is a good way to do that: just look how ios safari urlbar works. When you scroll up, it collapses and bottom menu slides off-screen too. Then when you scroll up by dragging it (no ‘kick’ up), it remains collapsed. But if you ‘kick’ up, it shows both urlbar and bottom buttons at full size. It’s like that since ios 7, afair. Websites just show it on scroll-up no matter how you do it, so annoying.
What do you mean by "kick up"?
Re: Kill Sticky Headers (2013)
#68Be a dear, and add this to your page. @media (max-height: 700px) { .My-Sticky-Header-Selector { position: absolute; } }
Yes! Sticky headers sometimes have their place (usually not), but they should never be used on short viewports, such as on phones in landscape mode.
Re: Kill Sticky Headers (2013)
#69Sticky headers make me feel claustrophobic, I don't know why. Regardless of my screen height (it could be a 30" monitor), it feels like something is "stuck" to my browser that wasn't before and makes me feel anxious. Even without that feeling, sticky headers kill the feeling that I'm moving through a viewport of a webpage. It makes your website look like it's not of the "webpage" medium that I've been familiar with f…
Unless you browse the internet in a frameless full screen window, there are a lot of other elements stuck at the top of it (or at the bottom)
It might be you're overreacting to something it's not really a big deal in general
Re: Kill Sticky Headers (2013)
#70Sticky headers make me feel claustrophobic, I don't know why. Regardless of my screen height (it could be a 30" monitor), it feels like something is "stuck" to my browser that wasn't before and makes me feel anxious. Even without that feeling, sticky headers kill the feeling that I'm moving through a viewport of a webpage. It makes your website look like it's not of the "webpage" medium that I've been familiar with f…
Having looked at your site, I feel it's ok to ignore anything you have to say about UX and design.