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)) {
elements[i].parentNode.removeChild(elements[i]);
}
}
})();
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).
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!