Killing both fixed and sticky headers

Last year someone linked to an article by Alisdair McDiarmid containing a bookmarklet that killed any element on a page that had the property position: fixed;.

Knowing how the modern web sometimes might look, this type of bookmarklet is easy to love. However, with the advent of more modern solutions in CSS such as position: sticky;, the bookmarklet is in need of some updating. What better way than to do it yourself, then?

Here’s the code

There’s just a few minor additions needed to the original code. In addition to checking for position: fixed;, we also need to check for position: sticky;. There’s one caveat, though. Safari still uses a vendor prefix for sticky positioning, so we need to make sure to look for -webkit-sticky as well.

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

  for (i = 0; i < elements.length; i++) {
    if (["-webkit-sticky", "sticky", "fixed"].includes(getComputedStyle(elements[i]).position)) {

All done! But this won’t do us any good unless it comes in the form of a handy bookmarklet, so here’s that as well. Drag this link to the bookmark bar of your browser of choice (or just save it).

Kill fixed/sticky

The caveat with these kinds of bookmarklets is that they are only working on the current page. If you leave the page or reload it, the effect disappear.

There’s a public gist up if you want to fork the code and play around with it yourself. There’s also a really neat online tool for generating bookmarklets of your own.

That’s it! Enjoy!