Skip to content

Instantly share code, notes, and snippets.

@cubetronic
Last active Sep 26, 2021
Embed
What would you like to do?
kill sticky fast
javascript:(function()%7Bvar%20e%3Ddocument.querySelectorAll('body%20*')%2Ci%3De.length-1%3Bwhile(i%3E%3D0)%7Bif(getComputedStyle(e%5Bi%5D).position%3D%3D%3D'fixed')e%5Bi%5D.parentNode.removeChild(e%5Bi%5D)%3Bi--%3B%7D%7D)()
@cubetronic

This comment has been minimized.

Copy link
Owner Author

@cubetronic cubetronic commented Apr 5, 2019

kill sticky fast

this behaves exactly like the original "Kill Sticky", just faster
see https://alisdair.mcdiarmid.org/kill-sticky-headers/ and https://gist.github.com/alisdair/5670341
for an alternative solution with different behavior (that i have not tested) see https://github.com/t-mart/kill-sticky

installation

save the following code as a bookmark location. name it "ks" or whatever you want. that's it.

javascript:(function()%7Bvar%20e%3Ddocument.querySelectorAll('body%20*')%2Ci%3De.length-1%3Bwhile(i%3E%3D0)%7Bif(getComputedStyle(e%5Bi%5D).position%3D%3D%3D'fixed')e%5Bi%5D.parentNode.removeChild(e%5Bi%5D)%3Bi--%3B%7D%7D)()

use

whenever you're on a page that has fixed positioned elements in your way, just click the bookmark link. you'll stay on the same page, but the fixed position elements will disappear.
refresh the page to restore its original appearance.

before

javascript: (function () {
	(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]);
			}
		}
	})()
})()

after

javascript: (function () {
	var e = document.querySelectorAll('body *'), i = e.length - 1;
	while (i >= 0) {
		if (getComputedStyle(e[i]).position === 'fixed') e[i].parentNode.removeChild(e[i]);
		i--;
	}
})()

how is it fast?

  • it only checks the length of the DOM elements array once, not dozens or hundreds of times
  • it iterates backwards, which is faster in general
  • by iterating backwards, it may find sticky headers faster too
  • it's not a function nested in a function, which is superfluous
  • the code is less verbose, with less brackets
  • it's minified before encoding
  • the link (with encoding) is only 224 characters, instead of 337
@leephillips

This comment has been minimized.

Copy link

@leephillips leephillips commented Sep 26, 2021

Your version certainly seems better. For my use I’ve added a phrase to zap sticky elements, which are as annoying as fixed ones:

var e = document.querySelectorAll('body *'), i = e.length - 1;
	while (i >= 0) {
		if (getComputedStyle(e[i]).position === 'fixed' || getComputedStyle(e[i]).position === 'sticky') e[i].parentNode.removeChild(e[i]);
		i--;
	}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment