Kill sticky headers

There is currently a trend for using sticky headers on websites. There's even a sticky header web startup.

I hate sticky headers. I want to kill sticky headers.

So I made this bookmarklet. Drag the link to your bookmarks bar:

Kill Sticky

Why sticky headers annoy me

I use an 11" MacBook Air, which means that I don't have much vertical screen space. The 50 pixels taken up by the sticky header could have been three lines of text.

I also normally scroll down using the space key, which scrolls just less than one full viewport at a time. When you cover up part of your content with a sticky element, that means that the space key scrolls too far down. Then I lose my position and have to scroll back up.

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.

How the bookmarklet works

It's really simple, because querySelectorAll is awesome. Here's the source:

(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]);
    }
  }
})();

The bookmarklet just finds all fixed-position elements on the page, and removes them. This might remove the navigation, but if you need it back, just hit refresh. That's why I created a bookmarklet and not a custom user-stylesheet or browser plugin: this is the simplest way to solve the problem.