The war against sticky toolbars continue

The wars against sticky toolbars, annoying overlays, unwarranted modals and scroll-locking continues. It’s a never-ending war of attrition. It’s been close to a year since I last updated my bookmarklet and since, I’ve come across more annoying ways to mess with the user experience on different websites.

Scenarios that my bookmarklet didn’t handle:

  • Setting overflow: hidden !important thus escalating the specificity wars further (my original script just set overflow: unset; which didn’t override !important styles)
  • The above styling was not just set on the <body> element, but also the <html> element, sometimes at the same time to really make sure that the poor user can’t scroll

No need to beat around the bush, this is the updated script.

const elements = document.querySelectorAll('body *');
const containers = document.querySelectorAll('html, body');

containers.forEach(el => {
  if (getComputedStyle(el).overflow === 'hidden') { ('overflow', 'unset', 'important');

elements.forEach(function (element) {
  if (["-webkit-sticky", "sticky"].includes(getComputedStyle(element).position)) { = "unset";
  else if(["fixed"].includes(getComputedStyle(element).position)) {

The biggest changes are that I had to use instead of in order to also set !important. In addition, I’m also checking for that styling on the <html> element and unset it there if needed.

As always, below is the packaged bookmarklet for you to drag into your own bookmarks. This time featuring a cool emoji, fitting the situation.

☠️ unSticky

Big thanks to Joacim de la Motte for providing valuable feedback and helping me improve the script.