How to remove anything that is sticky on websites (with Kill Sticky Headers)

Websites may throw a large number of different sticky things at your browser on load, from "we use cookies" and "please disable your ad-blocker" to "sign-up for our newsletter" or ads that move with the screen.

While some of these may be useful in some situations, they are more often than not annoying. Options to close the elements to hide them on the screen are offered by most sites but some shady ones may display sticky elements without such options.

Sticky elements are bad for a number of reasons: they take up valuable space which you notice more on small-screen or resolution devices, are often distracting, and may get in the way when you use page scroll functionality or want to print or save pages.

Kill Sticky Headers

https://cdn.ghacks.net/wp-content/up...ts-website.png

Kill Sticky Headers is a bookmarklet that you can run on any webpage you visit to remove sticky elements on it.

All that it takes is to click on the bookmarklet to execute it. The bookmarklet does its magic and removes the sticky element from the web page without touching anything else on it.

Useful especially if a site forces sticky elements on you that you cannot close or hide immediately. If you have ever been to a Pinterest listing of images you know that the site displays a sticky sign-up element on the page when you interact with the page a bit.

The element has no hide or close option and while you can use tricks to browse Pinterest without registration for as long as you like, most users would probably prefer an easier solution.

That easier solution comes in the form of Kill Sticky Headers as it removes sticky elements on webpages with just a click.

Note: The bookmarklet does not work on many sites in Firefox right now, likely because of this bug.

Here is a slightly modified version of Kill Sticky Headers that supports sticky and fixed position elements.

Code:

---

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

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

---

All that is left is create a new bookmark and use the code as a the URL.

• Chrome and Chromium-based browsers: Right-click on the bookmarks bar and select New > Page. If the bookmarks bar is not there, use Ctrl-Shift-B to display it. Add the code as the URL and pick a descriptive name for the bookmarklet.
• Firefox and Firefox-based browsers: Right-click on the main toolbar and select Bookmarks Bar to display it. Right.click on the bar and select New Bookmark. Paste the code into the location field and pick a descriptive name. Select add to save it. The bookmarklet does not work right now on sites that use Content Security Policy apparently.

Just click on the new bookmark whenever you want to execute its JavaScript function.

Tip: You can use uBlock Origin to remove any element on any page permanently. If you are worried about cookie notices primarily, check out this guide on how to deal with them permanently.

Closing Words

Kill Sticky Headers is a useful bookmarklet that hides sticky elements such as cookie notices, newsletter sign up forms, or registration prompts, from websites temporarily. It works fine on many sites at the time of writing but there are probably some with limited functionality after running the script.