
Kill sticky headers (2013) - okket
https://alisdair.mcdiarmid.org/kill-sticky-headers/
======
SippinLean
Combine this with the recent surge of sticky footers as well, especially on
small/mobile devices. Vice is a particularly bad offender:
[http://i.imgur.com/ltqYRX9.png](http://i.imgur.com/ltqYRX9.png)

That's a 60px sticky header + a 50px sticky footer on a 480px-tall screen. 23%
of my screen space is lost to sticky elements. The footer is only two buttons,
"Share" and "Tweet".

Every time you scroll down, the header slides up, _and then back down again_.
It's an incredibly distracting experience.

The icing on the cake is the ad in the middle of the article, it's in an
iframe that hijacks your scrolling, until you swipe through all _5_ slides you
_cannot_ continue scrolling through the article.

Why would I ever subject myself to consuming content this way?!

~~~
feld
Reader view on iOS Safari makes the web usable on mobile.

~~~
dredmorbius
[https://outline.com](https://outline.com) if reader mode not available --
works in pretty much any (JS-supporting) browser.

A small set of sites fail to render, including Google's Blogspot, using
dynamic themes, which are abominations to the Web. _No_ "fix this site's
fucked CSS / styling" tools seem to be able to handle that.

~~~
feld
Clever. Thanks for sharing.

------
ballenf
My gripe is the disappearing header that reappears at the slightest twitch of
reverse scrolling. The behavior needs to work more like drag down to refresh:
only reappear with a deliberate and significant scroll "up" (a drag down with
the finger) or just stay at the very top where it belongs (it only takes one
tap on mobile to get back there).

With most of them if you need to backtrack and read a few lines up, you have
to scroll well past the point or the exact text you want to read gets covered
by the header.

~~~
ryandrake
Or just don't re-appear, and leave scrolling alone. If I want to view a
header, I'll scroll to the top of the page.

~~~
erikpukinskis
Are you on iPhone? It's easy to scroll up on iOS (tap the top bar), but hard
on Android. That might be one reason why sticky headers are popular.

~~~
threesixandnine
No, sticky headers are popular because site owners hope for people to browse
the site some more.

~~~
untog
And people do use them.

My theory is that analytics is to blame for all of this. You can track how
many people clicked the button in your share header. You can't reliably track
how many people left because of it (there could be a million reasons for
leaving the page).

So your analytics shows an uptick in engagement by X%, and no clearly
discernable downtick. So the header stays.

All it would need is an A/B test or two, but easier said than done...

~~~
pastelsky
a.k.a survivorship bias

------
awinter-py
anything that hijacks ordinary scrolling behavior is going to ruin the
experience for most users. More and more web pages have found some way to
break page down -- either by initially stealing focus or by making scroll
completely JS-based.

Sticky headers make pgup/pgdn worse by make the visible size of the page
smaller than the window size, so you lose a line or two and have to rewind.
The ones that reappear when you scroll up are even worse.

Even worse, when you click to an anchor section on a sticky-header page, the
title of the section is hidden by the sticky header.

Take me back to the static web.

~~~
Andrex
NYT actually takes the page-down/lines of text problem into account. Odd that
others haven't copied.

Now that both position: sticky and Scroll Snap Points from CSS are landing in
browsers, those complaints will hopefully be resolved. Scrolling is much
better off left in the hands of CSS than JS.

~~~
steve-howard
NYT is pretty obnoxious in other ways, though, especially with a touchscreen.
If you click and drag to highlight something, it navigates to a different
article. If you double-click to select a word, it changes the text size. If
you accidentally hit the left or right arrow key while trying to scroll up or
down, it again tries to load the next article.

~~~
dredmorbius
And it's not possible to select text at all on Mobile.

I've taken to using alternative links (archive.is, archive.org, outline.com)
for sharing the articles simply because it's too much of a PITA to manage the
NYTimes.com page itself.

------
nv-vn
Reddit is even worse with their sticky footer that takes up 50% of the screen.
It tells you to install their official app (which is by far the worst Reddit
app I've found on Android) to continue. However the footer shows a big orange
"Continue" button (implies that you continue through the site, the heading
above this saying it will install the app is much less visible than the
button's text). Below this, in tiny grey text, it says "Or go to the mobile
site" (implying it will redirect to the website, which is in fact the opposite
of what actually happens). This is blatantly attempting to confuse users and
every time I end up on the reddit site in a mobile browser it revives my
hatred for reddit: the company.

~~~
a_e_k
This is why I append .compact to the desktop URL to browse with their older
mobile version. I find it much more usable.

~~~
Sir_Substance
You're my hero

~~~
hoosieree
And mine!

------
awkward
AMP is a horrific web standards breaking power grab but if there's one thing
that's going to kill it it's that google can't help but put a dang sticky
header at the top of every page.

~~~
throwaway91111
Drives me nuts. That's why there's a back button built in to the browser

------
yourduskquibble
Finally I see something posted about this.

If any of you are interested, I have been maintaining a filterlist that works
for uBlock origin that attempts to pin (so they won't move when you scroll
down) these sticky headers to the top and remove additional screen real estate
hijacking web elements.

It may be a losing battle but I update the list almost daily with all new
instances of this web plague that I come across. It also works on Firefox
Mobile for Android if you have uBlock Origin installed there.

If you'd like to subscribe, enter the following link[1] into your 3rd party
filters menu within uBlock Origin - just paste it into the 'Custom' URL entry
at the bottom of the '3rd party filters' menu option.

The project homepage is at:
[https://github.com/yourduskquibbles/webannoyances](https://github.com/yourduskquibbles/webannoyances)

Cheers!

[1]
[https://raw.githubusercontent.com/yourduskquibbles/webannoya...](https://raw.githubusercontent.com/yourduskquibbles/webannoyances/master/ultralist.txt)

~~~
cellularmitosis
Thanks so much for working on this!

------
vortico
Thanks for this!! It's unbelievable how OCD I am about this particular detail.
It feels like I'm physically constricted as I scroll through a webpage. The
other gripe is a webpage taking up 100% of the width of the page. I feel like
everything should have at least a small border so I know I'm not missing
content outside the width of the page.

------
austenallred
> The bookmarklet just finds all fixed-position elements on the page, and
> removes them.

That will do quite a lot more than remove sticky headers.

~~~
robbrown451
True, but remember this is a bookmarklet, not an extension. So you use it on a
site that is actively annoying you. If it breaks the site, you can refresh.

------
wybiral
> Finally, I just don't care right now about navigating your website, or
> following you on Twitter. I'm trying to read. Let me focus on that for now,
> please.

Agreed. Those sticky headers almost always wind up on sites like blogs and
text articles where they have no place and just reduce usability.

------
notadoc
I don't really mind the slim ones on desktop, but they seem to be trendier
than ever and particularly annoying on mobile.

~~~
apk-d
What drives me mad on mobile is the headers that expand/collapse depending on
whether you're scrolling up or down, except without any hysteresis which makes
them randomly activate as I scroll down. This, combined with the additional
lag caused by JavaScript, occasionally makes me ragequit from reading an
article. I don't know whether this is just my device (mid-end Xiaomi) or a
complete lack of usability testing.

~~~
mort96
A lot of stuff works amazingly well when you're on the same wifi network as
the development server and use a top of the line iPhone 7. I assume most
"usability testing" from such websites are done like that.

------
tim333
Great minds think alike - I also have an 11' macbook and got annoyed enough to
make a chrome extension
[https://chrome.google.com/webstore/detail/zapfixed/jgiflpbko...](https://chrome.google.com/webstore/detail/zapfixed/jgiflpbkoefoepgmeifoglafkomgjbge?hl=en)

I think his one may be better. Mine toggles using jquery.

------
iwalton3
You can use this userscript [1] to hide most floating headers when you scroll
down the page. (When you scroll up, the header is displayed again, so the site
doesn't become unusable.)

[1] [https://iwalton.com/wiki/#NoFixed](https://iwalton.com/wiki/#NoFixed)

------
blue_skies
Sticky headers bother me especially when trying to read news sites on a
laptop. Similar bookmarklets I have found helpful are "static ding" and
"static nuke" (staticding.org). Static Ding just changes "fixed" DOM elements
to "relative". They remain in the DOM and visible but they can scroll off
screen. I use that to read (for example) New York Times op eds because a NY
Times' link to view comments is on the sticky header itself. If I don't need
continued access to a sticky header, I use Static Nuke, which sets "fixed" DOM
elements to "display: none", similar to the posted bookmarklet which removes
them from the DOM.

------
terwanerik
Why not set the position to absolute instead of completely removing the
element. The solution to losing the navigation is reloading the page, seems
unnecessary.

------
asmosoinio
Oh cool, the bookmarklet also works on medium.com to remote the utterly
annoying bottom bar. Bookmarked and will be used.

With a 15" laptop screen the medium.com "Never miss a story from ..., when you
sign up for Medium."-bar takes up like 10% of vertical space.

------
rwallace
I'd love to have such a feature, but this doesn't work for me. On Chrome, it's
in my bookmark bar but it has no effect. On Firefox, it doesn't allow dragging
to the bookmark sidebar. (I actually don't see how it could possibly work -
how could something sitting in the bookmark bar have such an effect? But I'm
happy to grant the possibility there are things I don't know about how
browsers work.)

What am I missing?

~~~
acqq
Here's the introduction:

[https://support.mozilla.org/en-US/kb/bookmarklets-perform-
co...](https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-
page-tasks)

When you properly install it, instead of the link, there should be an
executable code in the bookmark (if it starts with http: or something, it
isn't). To activate the code, first you visit the page on which you want the
code to work, then you click at the bookmarklet.

~~~
rwallace
Ah! That works, thanks!

------
cdevs
Reminds me of a bookmark I made for work to override a JavaScript function
that clears a form. So test input on our live site will stay in a form and we
can stop typing it in over and over. the nice thing about the web is being
able to manipulate the front.

------
agumonkey
Heh, walking the dom to evict these kind of elements is a pleasure of mine.

I have too bookmarklets very similar. Makes for a nice tree recursion thinking
exercise at first.

ps: yes sticky is subtle and nowadays it's often wasting space.

------
vesrah
The problem is that they convert, so they are going to keep being used.

~~~
ravenstine
Citation? I ask this because data at my company has shown that virtually
nobody taps on the header, especially on hamburger menus.

~~~
vesrah
Guess my citation is also anecdotal, we have a series of extremely high
converting sites in the rehab market that drive calls from the sticky header.

------
dredmorbius
Is there a way for bookmarklets such as this to work in a mobile browser?

I find that they don't, because I don't have a bookmarks bar I can add the
bookmarklet to.

It does, however, work within the demo page itself.

~~~
anonred
In iOS it would require a Safari action extension that lets you load arbitrary
JS. In Android I’m sure there’s a bunch of apps that do something along those
lines.

Edit (no affiliation): Safari Snippets by ydangle
[https://appsto.re/us/biIhdb.i](https://appsto.re/us/biIhdb.i)

------
doodpants
So simple, yet so useful! How have I not found this before? It even kills the
annoying "Log In/Sign Up" pop-up dialog on facebook pages!

------
digi_owl
I must say I dislike just as much the very similar trend with mobile apps to
save a few lines of screen space, particularly with mobile web browsers.

------
l1n
In Firefox you you can go to about:config and set layout.css.sticky.enabled to
"false", which is helpful.

------
pleasecalllater
And one day someone will invent sticky body. Oh, wait, it is called flash :)

------
Steko
1Blocker recently added a 'tap to remove elements' feature.

------
deepsun
> I use an 11" MacBook Air, which means that I don't have much vertical screen
> space.

Maybe that's the problem? I use 27+ inches monitors at home and office, and
never had any issues with sticky headers.

Leave them alone! :)

~~~
effingwewt
Your answer to a problem no one should be forced to deal with is to spend more
money on a bigger monitor?

Not only does that not address the issue in the slightest, but that's very
much like saying if you don't like the banner ads run across the bottoms of
t.v. shows you should buy a bigger t.v. so it feels smaller.

------
ratsmack
Sticky headers ave their place, but they should be minimal and supply links to
other locations on the site. They should never be used for advertising.

------
onlinemantas
But… I like them. It makes navigating easier. I’m talking about just the nav
bar though—like the one here on HN.

~~~
azdavis
Right. But the nav bar on HN isn't sticky.

------
Breefield
Is this being reposted as satire? Mcdiarmid.org has a sticky header on mobile
in 2017...

~~~
Navarr
Afaik, only this one article uses a sticky header - and only then it seems to
be to show off the bookmarklet

------
bushin
getComputedStyle = undefined

Don't visit websites you don't like. That's the only way.

~~~
gkya
I passionately hate my uni's automation website, it's a great example of
haphazard overkill, but I need to choose my lessons each semester. What should
I do, switch schools?

------
such_a_casual
Honestly, this is an issue with having absolutely terrible browsers. This sort
of thing should be easy to do without having to know javascript. The user just
has so little power with the user interface they're given for interacting with
the internet. Obviously, this will change over time, but the transition period
is very frustrating.

~~~
tim333
A trouble is it's a moving target. As soon as you sort one annoyance they'll
invent a new one. That said Chrome could really do with a simple do not
autoplay video setting.

~~~
hello_there
> do not autoplay video setting.

Not to mention _sound_.

~~~
Doxin
At least they added the feature to mute a tab. No more hunting for that one ad
that's making sounds.

------
draw_down
I'm sympathetic, but forcing style calculation for every element on the page
may not be the most performant solution.

~~~
ncallaway
It doesn't need to be. It's a bookmarklet.

You click it when there's a sticky header. If it takes 200ms to run, that's
not a problem.

If it were a browser extension running on every page, sure, that's a disaster.

------
accountyaccount
A lot of blanket statements in here, but there are sites out there that have
tested them and found sticky headers useful in some way. We're not the only
demographic.

I personally don't like them either, but I also know how to scroll. I've seen
instances on long pages where there are audiences who have a hard time
navigating through a lot of content without a constant point of reference.

------
king_phil
Nobody mentioned the yellow sticky header on the "kill sticky headers"
page...?

~~~
eat_veggies
It's to help you test out the script on the page

------
err4nt
Well this blog post is _really_ shortsighted for a couple reasons:

1\. There's position: sticky; recently added to CSS:
[https://drafts.csswg.org/css-position/#sticky-
pos](https://drafts.csswg.org/css-position/#sticky-pos)

2\. Position: sticky; is gaining browser support fast:
[http://caniuse.com/#feat=css-sticky](http://caniuse.com/#feat=css-sticky)

So what I draw from that are the following insights:

3\. The author of the bookmarklet should update the code to also check for
elements now using position: sticky;

4\. Sticky elements haven't peaked on the web, the deluge is _about_ to begin
actually. Brace yourselves…

~~~
sean2
Does this little update to the bookmarklet solve the issue? I'm not a webdev,
feel free to fix it.

(function () { var i, elements = document.querySelectorAll('body *');

    
    
      for (i = 0; i < elements.length; i++) {
        if (getComputedStyle(elements[i]).position === 'fixed') {
          elements[i].parentNode.removeChild(elements[i]);
        }
        // 2017 update:
        if (getComputedStyle(elements[i]).position === 'sticky') {
          elements[i].parentNode.removeChild(elements[i]);
        }
      }

})();

~~~
jrapdx3
Almost. This modification would cover it:

    
    
        ...
        for (i = 0; i < elements.length; i++) {
           if (getComputedStyle(elements[i]).position === 'fixed' ||
               getComputedStyle(elements[i]).position === 'sticky') {
             elements[i].parentNode.removeChild(elements[i]);
           }
        } ...
    

There are probably more clever ways to go, but this will do the trick. BTW
haven't found many sites using "sticky", but good to be ready just in case.

