Sticky 'headers' that disappear when you scroll down, and appear when you scroll up. I hate them so much. It hurts my brain to see the stupid thing appear and disappear constantly if I scroll around a page.
The worst part is you can't even zap them out of the way with something like uBlock, because then there's no header even when you're at the top of the page. >:(
EDIT: Whoops, flipped the directions. Complaint still stands though.
God yes. For some reason, I automatically scroll in such a way that I always keep what I'm reading at the very top of the screen. Which means that every time I want to reread a sentence I first have to scroll past the header.
Mea culpa: this is kinda my doing. I released a library headroom.js (https://wicky.nillia.ms/headroom.js/) for this purpose in 2013 or something, announced here on HN, and it got very popular. It got ported to every framework imaginable. And tons of websites either used it or imitated it.
I think it can be done well, but most do not do it well. Partially my fault because the defaults in headroom were not how I would recommend it. It had a tolerance option, which meant you had to scroll up so far/fast to trigger the reveal. But in my eternal foolishness I set this to zero by default. Adding a little tolerance makes it much less jittery and more intentionally triggered. And thus much less annoying. See the header on the site, it doesn't appear/disappear with every 1px movement
Screen real-estate for legitimate content is often at a premium and then they go and steal some of that land with sticky headers and or footers. I occasionally run across mobile sites that use both at the same time, while throwing in ads here and there, it's an atrocious experience.
Yes but then I think they should leave the header at the top of the page. If I need it I'll scroll all the way back up! Don't make it randomly re-appear and cover the text I wanted to see because I decided to re-read that last paragraph.
This is literally the best ux pattern you can have. It is intuitive - user immediately discovers it when performing the obvious action, it increases the user experience (more text to read) without any real downside.
It is the first thing I suggest to anyone when I see someone didn't implement it.
This is only true if you assume users always scroll down while reading and the only reason they scroll up is to find the header... but many of us scroll up and down while reading and find the re-appearance of the header to interfere with our goal of reading the content. So there is a clear downside for us "up and down" readers.
I don't know what portion of users we are though, I'm glad to see I'm not the only one!
Seriously, have you ever used one? Because most people do not read monotonically downwards. We often scroll back to see something in a previous sentence referred to in the spot we are reading. So we want to go back one or two lines. Bot NOOOOooo, the header pops up, covers 1/4 of the screen, so now we have to scroll that much more, pushing off the screen the other text we hoped to keep on the screen, and it might even go through a few adjustments. So, now, what was a non-event less distracting than turning the page in a book or magazine has now become a fully distracting scroll-fest.
Is that clear enough for you?
>>This is literally the best ux pattern you can have.
NOT EVEN CLOSE. The best User Experience pattern is to give the reader what they asked for AND NOTHING MORE. Nothing more for you, nothing more for your advertisers, and nothing more for them. We click to read the content, LET US READ the content, ALL the content, and NOTHING BUT the content. We'll even understand if some proper STATIC adverts are placed in the content, and we might even click thru if you've shown us something relevant and interesting
But as soon as you start putting motion and other distraction in the adverts, my priority becomes NOT reading the advert, but figuring out how to get it out of my face. And if by some chance I remember it, it is filed among "companies to avoid".
Why does it seem everyone who deals with advertising, from the execs down to the programmers, so stupidly thinks only of the first-order effects — "Grab Their Attention!" — and not the second-order effects, where being so offensive — surprise! — offends people...
This! And to make matters worse is the header is removed from the document flow, causing the content to jump up when scrolling down. And if you then scroll up to try to read the content that jumped out of the viewport, the stupid header is injected back into the flow causing the content to jump down again. Sigh.
> This post purposefully ignores the reduced motion preference to give everyone the same truly terrible experience. I am sorry. Please use your browser’s reader mode.
"Reader Mode" shouldn't even be a special mode. It should just be the default browsing experience, and users who want all this styling crap should have to enable "Clown Mode" or something.
I thought this was going to be about iOS and how now (as of iOS 26) there is a "fade out" at the top of every web page (around the notch/top-edge area).
When scrolling/reading a web page, it literally changes that section of the text so that it fades to gray.
So, "everything scroll fades".
I couldn't find a way to turn it off. Quite irritating, IMHO.
EDITED TO ADD ELABORATION: The issue with iOS "scroll fade" text color in Safari near the top notch is that this makes that top-edge-text "dynamic" (changing) and thus "draws attention" to it visually, thus competing for eyeball attention when I am probably actually reading somewhere further down on the page. Also, I would still like to be able to glance up to the topmost visible text if wanted, without having to adjust to its different and less visible colors. Apple designers should know all this. Further, I'd say the page text color should probably by default respect what the web page designer configured it as, and not have the OS change that text color (unless the user gets fancy and requests an override with dark mode or whatever settings).
This article's critique seems valid, too (more generically about "scroll fade" in interfaces, e.g. web pages, which seems to mostly be about items appearing gradually via motion). Personally, I see less of that these days, compared to making every page in an OS fade out where unnecessary.
The poster seems to be implying that this effect is prevalent across the web, yet i'm seeing it for the very first time on that post. (And, indeed, it's annoying. My eyes can't read when there's animation going on nearby.)
The goldfish animation along the bottom is epic and i will have to mine that bit for reuse somewhere :).
I feel like the scroll fade fad is misunderstanding layered on bugs, turtles all the way down.
Once upon a time, developers implemented lazy loading of images, to save bandwidth. However, some developers implemented it poorly, waiting until the moment an image is scrolled on-screen to even start loading it, leading to a visible blip as you scroll.
(The better way would be to load an additional pageful of images beyond the current scroll view, which would provide enough time to load before scrolling into view at least most of the time. However, this doesn't maximally save bandwidth and some developers don't make good tradeoffs between diminishing returns on saving bandwidth vs. visibly degraded UX.)
Then, designers saw the blip-into-view effect, thought it was an intentional visual effect (rather than an artifact of poorly implemented lazy loading), but thought, oh, I'll fix it so it looks nice, with fading.
And here we are with a dumb visual fad originating from a bug without realizing it was a bug.
Hah, the point has certainly been made. Absolute Barf-o-Rama.
I suffer from pretty severe motion sickness, which hasn’t really improved as an adult, and this page immediately made me feel like I’m going to throw up. Had to switch to reader mode after the first image. I was always the kid who couldn’t read in the car, and was always groggy on long road trips because of Dramamine (side note, Meclizine has significantly improved my life, as it has largely the same effect without drowsiness). As an adult I’m fine as long as I’m in the front seat, public transit is terrible for me. Elevators are tiny torture chambers, especially when stopping on multiple floors. And it’s cumulative, the sensation becomes worse the more I’m exposed to it over the course of a day (I have a mental “theme park budget” in my head of how many rides I can comfortably do!). VR can’t have any motion that isn’t firmly anchored to a sense of place (space ship/driving sims are okay though!)
I’m glad awareness is being raised about this, but I’m curious what websites are using this now? Is it just personal blogs and the like right now? I definitely would have noticed this cropping up on websites I frequent.
I worked for a client who was all about scrolljacking. Then he discovered parallax effect, and there was no looking back. He fired me, and got another team who didn't have any opinions.
Now the page stutters on every device other than iPhone 16+ with 5G. :shrug:
Essentially, for any animation that gets repeated, it should decrease in duration over time. This makes things impactful when they're first being displayed, but they very quickly approach an extremely minimal state, making things feel snappy.
Scrolling to the bottom then forcing me to click "show more"? Lazy. A truly horrible experience. I don't know how anyone could think that is a good idea. The worst offenders are the ones showing me products. You might as well not have pages of products at all. Just tell me these 12 are the only ones you have because I've already lost interest. Not that most web stores are any good - most have no useful ability to search or browse so finding anything is like digging through a junk drawer. It all screams "we hate selling product, please go away".
Next worst? Everything Google makes and all the fools who copied them: scroll down, scrolling hard stops, then a few seconds later the next segment of content loads. The scrollbar position is naught but lies. WHY??? Are you proud of that? Because you shouldn't be. You should be ashamed. Demand-load the content behind the scenes so scrolling is continuous and smooth. If the user scrolls fast then skip pages and/or cancel prior requests. The scrolling is the priority, lazy-load the content as needed... but for f*k sake don't do what Google does.
The top worst: hijacking scrolling for any form of animation or to change direction. Absolutely horrid and I leave any webpage that does this out of spite. This just screams "I'M A DESIGNER, LOOK AT MEEEEE!!!!!". It is code equivalent of being "too clever", but for UX. If you don't want people to buy your product or signup for your service but instead be impressed by your ability to vomit out D-E-S-I-G-N then by all means proceed. Everyone is guilty of this, even those who should know better.
I couldn't do the mandatory onboarding training at a job once because the course web app had heavy scroll fade, and I got nauseous after a few minutes. I tried every few hours for weeks. Eventually I said I couldn't do it. They had to print it out to pdf for me, and gave me a pass on the courses that were dependent on animation to work.
It’s kind of like when someone wants you to read something, so they hold the thing to read for you and read it out loud, while moving their finger at the words they’re currently reading. I know how to read!!!
I can only add another aberration that it just started to happen on my browsers without even updating or doing anything at all: I get the master volume raised, I mean not the YouTube volume, but the volume that is reported in my OS.
I truly don't know how this is possible or how should I turn it off completely. There are some settings in Firefox but the ones I have tried do not work.
This is one of the worst things I have seen in many years, along with all the other aberrations that are already spread on the net.
I've always been under the impression it was lazy loading the page to increase page loading times for content above the fold? At least this was why I started using it about 8 years ago.
Its like anything though. I think people just thought it was a cool effect and so it wasn't about page speed any more, it was just about something people used to add some panache to their sites.
Kind of like people who've been abusing modals for the last decade or so. lol
I'm guilty of this as well. https://kraa.io/about has some fade-in animation for the intro text – driven by wanting the initial impression to be focused/minimal and 'unravel' as you go. I take it that most HN folks would vastly prefer to NOT have this?
I'm someone who loves over-the-top, creative-for-the-sake-of-creative web design, even for something primarily text-based like a blog post, I 100% sympathize with and want to accommodate those who don't.
I think prefers-tacky is a brilliant idea! It means excess decorative images could avoid even being downloaded if the user so chooses.
210 comments
Sticky 'headers' that disappear when you scroll down, and appear when you scroll up. I hate them so much. It hurts my brain to see the stupid thing appear and disappear constantly if I scroll around a page.
The worst part is you can't even zap them out of the way with something like uBlock, because then there's no header even when you're at the top of the page. >:(
EDIT: Whoops, flipped the directions. Complaint still stands though.
I think it can be done well, but most do not do it well. Partially my fault because the defaults in headroom were not how I would recommend it. It had a tolerance option, which meant you had to scroll up so far/fast to trigger the reveal. But in my eternal foolishness I set this to zero by default. Adding a little tolerance makes it much less jittery and more intentionally triggered. And thus much less annoying. See the header on the site, it doesn't appear/disappear with every 1px movement
https://alisdair.mcdiarmid.org/kill-sticky-headers/
For one of my pages I tried this:
It is the first thing I suggest to anyone when I see someone didn't implement it.
I've never heard a complaint about it until now.
I don't know what portion of users we are though, I'm glad to see I'm not the only one!
>>without any real downside
Wow, impressive blindness!
Seriously, have you ever used one? Because most people do not read monotonically downwards. We often scroll back to see something in a previous sentence referred to in the spot we are reading. So we want to go back one or two lines. Bot NOOOOooo, the header pops up, covers 1/4 of the screen, so now we have to scroll that much more, pushing off the screen the other text we hoped to keep on the screen, and it might even go through a few adjustments. So, now, what was a non-event less distracting than turning the page in a book or magazine has now become a fully distracting scroll-fest.
Is that clear enough for you?
>>This is literally the best ux pattern you can have.
NOT EVEN CLOSE. The best User Experience pattern is to give the reader what they asked for AND NOTHING MORE. Nothing more for you, nothing more for your advertisers, and nothing more for them. We click to read the content, LET US READ the content, ALL the content, and NOTHING BUT the content. We'll even understand if some proper STATIC adverts are placed in the content, and we might even click thru if you've shown us something relevant and interesting
But as soon as you start putting motion and other distraction in the adverts, my priority becomes NOT reading the advert, but figuring out how to get it out of my face. And if by some chance I remember it, it is filed among "companies to avoid".
Why does it seem everyone who deals with advertising, from the execs down to the programmers, so stupidly thinks only of the first-order effects — "Grab Their Attention!" — and not the second-order effects, where being so offensive — surprise! — offends people...
There is a special circle in hell where designers of such sites have to actually use the sites they design.
and with the website doing the same thing, it's a mess.
> This post purposefully ignores the reduced motion preference to give everyone the same truly terrible experience. I am sorry. Please use your browser’s reader mode.
"Reader Mode" shouldn't even be a special mode. It should just be the default browsing experience, and users who want all this styling crap should have to enable "Clown Mode" or something.
When scrolling/reading a web page, it literally changes that section of the text so that it fades to gray.
So, "everything scroll fades".
I couldn't find a way to turn it off. Quite irritating, IMHO.
EDITED TO ADD ELABORATION: The issue with iOS "scroll fade" text color in Safari near the top notch is that this makes that top-edge-text "dynamic" (changing) and thus "draws attention" to it visually, thus competing for eyeball attention when I am probably actually reading somewhere further down on the page. Also, I would still like to be able to glance up to the topmost visible text if wanted, without having to adjust to its different and less visible colors. Apple designers should know all this. Further, I'd say the page text color should probably by default respect what the web page designer configured it as, and not have the OS change that text color (unless the user gets fancy and requests an override with dark mode or whatever settings).
This article's critique seems valid, too (more generically about "scroll fade" in interfaces, e.g. web pages, which seems to mostly be about items appearing gradually via motion). Personally, I see less of that these days, compared to making every page in an OS fade out where unnecessary.
The goldfish animation along the bottom is epic and i will have to mine that bit for reuse somewhere :).
Once upon a time, developers implemented lazy loading of images, to save bandwidth. However, some developers implemented it poorly, waiting until the moment an image is scrolled on-screen to even start loading it, leading to a visible blip as you scroll.
(The better way would be to load an additional pageful of images beyond the current scroll view, which would provide enough time to load before scrolling into view at least most of the time. However, this doesn't maximally save bandwidth and some developers don't make good tradeoffs between diminishing returns on saving bandwidth vs. visibly degraded UX.)
Then, designers saw the blip-into-view effect, thought it was an intentional visual effect (rather than an artifact of poorly implemented lazy loading), but thought, oh, I'll fix it so it looks nice, with fading.
And here we are with a dumb visual fad originating from a bug without realizing it was a bug.
I suffer from pretty severe motion sickness, which hasn’t really improved as an adult, and this page immediately made me feel like I’m going to throw up. Had to switch to reader mode after the first image. I was always the kid who couldn’t read in the car, and was always groggy on long road trips because of Dramamine (side note, Meclizine has significantly improved my life, as it has largely the same effect without drowsiness). As an adult I’m fine as long as I’m in the front seat, public transit is terrible for me. Elevators are tiny torture chambers, especially when stopping on multiple floors. And it’s cumulative, the sensation becomes worse the more I’m exposed to it over the course of a day (I have a mental “theme park budget” in my head of how many rides I can comfortably do!). VR can’t have any motion that isn’t firmly anchored to a sense of place (space ship/driving sims are okay though!)
I’m glad awareness is being raised about this, but I’m curious what websites are using this now? Is it just personal blogs and the like right now? I definitely would have noticed this cropping up on websites I frequent.
Now the page stutters on every device other than iPhone 16+ with 5G. :shrug:
Essentially, for any animation that gets repeated, it should decrease in duration over time. This makes things impactful when they're first being displayed, but they very quickly approach an extremely minimal state, making things feel snappy.
It's not realistic, though. Illegible sites never get that detail right.
Scrolling to the bottom then forcing me to click "show more"? Lazy. A truly horrible experience. I don't know how anyone could think that is a good idea. The worst offenders are the ones showing me products. You might as well not have pages of products at all. Just tell me these 12 are the only ones you have because I've already lost interest. Not that most web stores are any good - most have no useful ability to search or browse so finding anything is like digging through a junk drawer. It all screams "we hate selling product, please go away".
Next worst? Everything Google makes and all the fools who copied them: scroll down, scrolling hard stops, then a few seconds later the next segment of content loads. The scrollbar position is naught but lies. WHY??? Are you proud of that? Because you shouldn't be. You should be ashamed. Demand-load the content behind the scenes so scrolling is continuous and smooth. If the user scrolls fast then skip pages and/or cancel prior requests. The scrolling is the priority, lazy-load the content as needed... but for f*k sake don't do what Google does.
The top worst: hijacking scrolling for any form of animation or to change direction. Absolutely horrid and I leave any webpage that does this out of spite. This just screams "I'M A DESIGNER, LOOK AT MEEEEE!!!!!". It is code equivalent of being "too clever", but for UX. If you don't want people to buy your product or signup for your service but instead be impressed by your ability to vomit out D-E-S-I-G-N then by all means proceed. Everyone is guilty of this, even those who should know better.
(Take this as another excuse not to hijack scrolling behavior, not an actual request you improve your implementation of tacky-mode.)
I truly don't know how this is possible or how should I turn it off completely. There are some settings in Firefox but the ones I have tried do not work.
This is one of the worst things I have seen in many years, along with all the other aberrations that are already spread on the net.
Its like anything though. I think people just thought it was a cool effect and so it wasn't about page speed any more, it was just about something people used to add some panache to their sites.
Kind of like people who've been abusing modals for the last decade or so. lol
I think a website is similar to a painting. Some will make you dizzy by just looking at them, and others will be a minimalist dream.
Don’t hate me HN, but I say keep messing with the scroll bar, keep making annoying blinking banners, have your way with scroll fade.
Don’t listen to these web dev veterans, they are just like snobby movie critics!
I think
prefers-tackyis a brilliant idea! It means excess decorative images could avoid even being downloaded if the user so chooses.