Kill Sticky Headers (2013)

[vortico]

Sticky 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 for 20 years. Humans have a very good eye for relative movement. The visual processing part of your brain considers movement much more contrasting than color. So a fixed header when you're scrolling at 1cm/second is visually equivalent to a big bar moving upward at 1cm/second while you're trying to read an article. It's hard not to pay attention to it. But navbars don't contain content, so they shouldn't steal attention from the page content.

[pgcj_poster]

Exactly. When I'm using an application called a browser to view a document on the web, I don't want the document to try to become part of the chrome: that breaks the "web page" metaphor. There is a very small subset of websites, such as Figma, that feel more like independent applications than web pages, and for those I get more annoyed by the presence of the browser chrome, for basically the same reason.

What's worse, almost no sticky header has any useful items in it. Take StackOverflow as an example. It has a link to the homepage and a searchbar, in spite of the fact that many frequent StackOverflow users have never visited the homepage and never used the built-in search. The top of the screen is the most valuable part, because my head is usually above the screen, so it's more comfortable for my eyes to rest around the top of the viewport. So if you put something there, it had better be important.

[dylan604]

Sticky headers just become part of the window to me. Like everything, some are better than others. Some are horrendous with flashing video/banners/etc. Some are useful so that the site navigation is always available regardless of page length. I personally hate having to scroll back to the top just to jump to the next section. This website is too hot, this one is too cold, this one is almost just right. Can't please 100% of the users, ever.

[baroffoos]

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

[asjw]

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

[liability]

Ever since I started using unlock origin's cosmetic filters to remove headers, footers and sidebars from most websites I visit, the web has become a much more enjoyable place. These 'engagement hacks' do little other than make your website look cluttered and distracting, which probably gets misinterpreted as 'engagement'.

[shpx]

You can add https://github.com/yourduskquibbles/webannoyances#one-click-... to UBlock Origin as a custom list instead of removing them yourself.

Disclaimer: I've never tried it.

[shbooms]

you can also use uBO's ":style()" function to override css properties and effectively "un-sticky" the majority of header/nav elements if you prefer not removing them completely. I use these two filters to globally un-stick every header and nav element which uses CSS position properties to sticky themselves (which is a good many of them):

    ##header:style(position: absolute !important)
    ##nav:style(position: absolute !important)

[sideproject]

It took me awhile to realize how bad sticky divs are for my users. Justification of using sticky elements was that they were always visible. But why? Because they are frequently accessed elements? Scrolling to top doesn't take much of effort. They might be frequently accessed, but they were also not that hard to access.

It hit me hard, when I saw my user's screen which was relatively small and my sidebar and header were both sticky, leaving only a small area to display the main content.

I've now gone back to mostly non-sticky elements. It's refreshing. Not seeing those "frequently accessed" elements isn't much of an issue. I don't think I ever complained about popular websites not having its header sticky.

Letting users focus on the main content has been by far the most beneficial thing from my perspective.

[mumblemumble]

Thank you.

As a user of a laptop with a small screen, I can say that, at least where I'm concerned, making those "frequently accessed" elements sticky is a great way to ensure I won't access them that much. I don't much go for non-enjoyable reading experiences. So I'm either going to hit the reader button to make the header disappear from my life, or, if that's not an option, I'm going to read what I came for and then go somewhere more fun.

[JacobSeated]

I just finished studying Multimedia design at KEA (Copenhagen School of Design and Technology), and I was surprised how popular sticky headers were among the teachers. Some even arguing they improved the browsing experience. Clearly they could not be more wrong.

I think part of the issue is, educationally, people gets told that sticky headers and huge font-size or white space is good design. In reality, they are just chasing away people from their websites.

Webdesign trends are so hostile towards users...

[dredmorbius]

Web design isn't the solution.

Web design is the problem.

(In fairness: 99% of Web designers give the other 1% a bad reputation.)

[ethagnawl]

There are few things that frustrate me more than scrolling down a web page, while trying to read and article, and having the header become sticky and obscure what I'm reading.

As far as I can remember, the _only_ app I've ever seen get this exactly right (in terms of not ever obscuring text) is the New York Times' Android app.

[hombre_fatal]

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 at heart is critical. Else you get these ridiculous break-room ideas that nobody spent more than 5 seconds thinking about.

[janci]

Sticky 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.)

[paol]

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.

[pcr910303]

For people who would like a more concise source (in ES6 & a bit of functional style):

    [...document.querySelectorAll("*")].filter(el => getComputedStyle(el).position === "fixed").forEach(el => el.parentNode.removeChild(el));

The code above also works, you can add the URL below to bookmarks.

    javascript:[...document.querySelectorAll("*")].filter(el%20=>%20getComputedStyle(el).position%20===%20"fixed").forEach(el%20=>%20el.parentNode.removeChild(el));

Also, for people who uses Safari:

You can add javascript: links to your bookmark by adding any bookmark & changing the URL.

[dezren39]

Thanks! That's a lot easier on the eyes!

So I did this:

  javascript:(function()%7B(function () %7Bvar i%2C elements %3D document.querySelectorAll('body *')%3Bfor (i %3D 0%3B i < elements.length%3B i%2B%2B) %7Bif (getComputedStyle(elements%5Bi%5D).position %3D%3D%3D 'fixed' || elements%5Bi%5D.className %3D%3D%3D 'awsui-flashbar') %7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)()

To add the flashbar from AWS to the mix, how would I do that with the streams like this? I'm sure if I hunt a bit I'll figure it out.

[EvilTerran]

Speaking of "concise", in modern browsers you can replace el.parentNode.removeChild(el) with just el.remove():

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/r...

[joegahona]

Sticky navigation on desktop that is appox the height of the Hacker News nav and does NOT include ads is fine with me. I loathe sites that have a sticky header with a 970x250 ad, however, such as the Washington Post.

Sticky navigation on phones is not OK, but I actually like when the nav pops down when I scroll back up. A "peek-a-boo" nav, if you will.

[baroffoos]

I like the well done hiding nav bar in my browser but the web ones tend to go mental popping up and down randomly. And then it just magnifies the crappiness when you have 2 stacked nav bars from the browser and website which are both trying to hide/unhide.

The ideal hiding navbar is one which is the only one on the screen and one which only pops down as much as the user scrolls so you have to scroll up one navbars worth to get the full thing and not the ones where you scroll up 1 px by accident and the full navbar flys down

[partiallypro]

Really? I feel like a navigation stuck to the top on a phone is a must. Scrolling on a phone us much more complicated and tedious than with a mouse; as long as it's small and not intrusive.

[lykahb]

That's a good post. The sticky elements is one of the most annoying things on the web. So after getting annoyed enough I made a simple extension that hides them. It automatically hides the sticky elements on nearly all websites, has a whitelist, and handles special cases like sticky splash screens. It runs on desktop browsers and mobile Firefox.

https://github.com/lykahb/sticky-ducky

[Fauntleroy]

It's worth noting that this solution will not work for anything using the relatively new `position: sticky`

[baroffoos]

> relatively new

sticky has been around since at least 2014

[seph-reed]

Be a dear, and add this to your page.

  @media (max-height: 700px) {
    .My-Sticky-Header-Selector {
      position: absolute;
    }
  }

[frosted-flakes]

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.

[robertoandred]

The viewport/scrollbar issue can be fixed by properly setting the css scroll-padding property: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padd...

[GoblinSlayer]

Many try, but nobody quite gets it right.

[V-2]

Sticky 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.

[ChrisSD]

> 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.

[jiveturkey]

I used to have this in my bookmarks bar as 'defuck page' but decided that name was too awkward for work when projecting my screen.

there's a more advanced version of this that is an extension. it offers a fixed delay, adjustable per site. so you can nuke slide-overs and html5 popups as well. it isn't perfect but it's still a useful tool. sorry i don't have the link handy as i'm not using that extension currently.

[fanf2]

My “kill sticky” bookmarklet gets used dozens of times a each day (that might be an exaggeration, but not by much). I treat my browser profiles as mostly ephemeral, discardable, and instead of browser bookmarks I have https://dotat.at/:/ ... except for kill sticky, which gets added to a new profile right after uBlock Origin and 1Password.

[tim333]

Theres always my extension to toggle the darn things which works sometimes https://chrome.google.com/webstore/detail/zapfixed/jgiflpbko...

[littlecranky67]

Relevant GitHub repo: https://github.com/eemeli/chrome-kill-sticky

[vasili111]

I use "Click to Remove Element" Chrome extension: https://chrome.google.com/webstore/detail/click-to-remove-el...

[jkahrs595]

I'm gonna go out on a limb and say that the majority of users don't use spacebar for scrolling in 2019. Besides that (and the screen real estate), I'm not sure it's bad enough to need a bookmarklet to kill it.

[jolmg]

The issue that was raised isn't just about the Spacebar. It's about scrolling by full-pages, so PgDown/PgUp would also have the same problem when a page has Sticky Headers.

I guess you can make the same argument that it's possible that people don't use PgDown/PgUp either, but that's besides the point, I think.

Generally, interfaces have a lot of features by default and when a particular interface breaks or removes them for no good reason (and I don't think I've ever seen a sticky header that could justify it), well that at least leaves a very bad impression. It's wasteful.

Same goes for links and buttons which are made to work only when clicking with the mouse, when by default they work with the keyboard too. Same goes for text which is set with a fixed width and necessitates a large minimum window width to read properly when by default text adjusts to a window's width. etc.

Nobody is average, so the world would suck if it only worked for the average.

For the record, I do scroll with the spacebar. I like to skim pages as quickly as possible, and PgDown is in different positions in different keyboards, so I just find spacebar to be super-accessible.

[pcr910303]

Well,

> that the majority of users don't use spacebar for scrolling in 2019

I don't use the spacebar for scrolling, too. But I'm pretty sure there are people who do; and those people care.

> I'm not sure it's bad enough to need a bookmarklet to kill it.

Well, it's bad enough for me that medium.com has a too-giant banner that covers over 30% of the viewport...

At the very least, it was bad enough that I submitted this page, even when I usually don't think that web-trends (like npm, 4MB of JS, 'modern' look of applications, etc...) are bad (opposed to the HN crowd).

[hydrox24]

> the majority of users don't use spacebar for scrolling in 2019

Like halal food, or kosher food in New York, it's not about how many people use a browser feature. It's about how much they care.

[NoInputSignal]

> I'm gonna go out on a limb and say that the majority of users don't use spacebar for scrolling in 2019

If you are designing the web for people of all abilities, then consideration of space bar scrolling is important.

Imagine the frustration of a user that expects certain behavior of the space bar and experiences something else.

[MereInterest]

It isn't bad enough to need a bookmarklet to kill it. It is worse. It's bad enough to make a greasemonkey script to kill all of them. Sticky headers also muck up the Page Down button quite a bit.

[buboard]

its my favourite way to scroll, because you can predict where the next line will be (if not for those damn stickies)

[miguelmota]

Instead of a bookmarklet I recommend using a browser extension like greasemonkey or tampermonkey to autorun the script and have the sticky headers unstuck on page load. No manual work of clicking the bookmarklet.

[gpvos]

They explain in the article why they don't like that.

[Doctor_Fegg]

Another benefit of this is that it improves scrolling performance on old hardware. I sometimes browse on a 2010 Mac mini (using Safari) and killing headers can make a big difference.