Bookmarklet to remove sticky elements and restore scrolling to web pages!

Overview

kill-sticky

A bookmarklet to remove sticky elements and restore scrolling to web pages!

Demo

Demonstration of kill-sticky

Background

Alisdair McDiarmid wrote at his Kill sticky headers bookmarklet page...

I hate sticky headers. I want to kill sticky headers.

I could not agree more.

But, while McDiarmid's code has already been immensely helpful to me, I wanted to extend it to also kill of another recent trend: marketing modals. They also abuse position: fixed styling and remove your ability to scroll with overflow: hidden. Not cool, man.

And that's what this extension aims to address:

Installation

Make a new bookmark (on your bookmark bar) with the following URL:

javascript:(function()%7Bdocument.querySelectorAll(%22body%20*%22).forEach(function(node)%7Bif(%5B%22fixed%22%2C%22sticky%22%5D.includes(getComputedStyle(node).position))%7Bnode.parentNode.removeChild(node)%7D%7D)%3Bdocument.querySelectorAll(%22html%20*%22).forEach(function(node)%7Bvar%20s%3DgetComputedStyle(node)%3Bif(%22hidden%22%3D%3D%3Ds%5B%22overflow%22%5D)%7Bnode.style%5B%22overflow%22%5D%3D%22visible%22%7Dif(%22hidden%22%3D%3D%3Ds%5B%22overflow-x%22%5D)%7Bnode.style%5B%22overflow-x%22%5D%3D%22visible%22%7Dif(%22hidden%22%3D%3D%3Ds%5B%22overflow-y%22%5D)%7Bnode.style%5B%22overflow-y%22%5D%3D%22visible%22%7D%7D)%3Bvar%20htmlNode%3Ddocument.querySelector(%22html%22)%3BhtmlNode.style%5B%22overflow%22%5D%3D%22visible%22%3BhtmlNode.style%5B%22overflow-x%22%5D%3D%22visible%22%3BhtmlNode.style%5B%22overflow-y%22%5D%3D%22visible%22%7D)()%3B%0A

Installation of kill-sticky

Usage

Every time you see a bothersome fixed position element and/or loss of scrolling functionality, click the bookmark!

This may break the page sometimes, such as deleting nav or causing scrollbars to show up where they shouldn't. If that happens, just reload the page.

How the bookmarklet works

  1. Iterate through all child nodes of body. Delete the node if it is styled with position: fixed.
  2. Set the style of the html node for overflow: auto.
    document.querySelectorAll('body *').forEach(function(node) {
        if (['fixed', 'sticky'].includes(getComputedStyle(node).position))  {
            node.parentNode.removeChild(node);
        }
    });

    document.querySelectorAll('html *').forEach(function(node) {
        var s = getComputedStyle(node);
        if ('hidden' === s['overflow']) { node.style['overflow'] = 'visible'; }
        if ('hidden' === s['overflow-x']) { node.style['overflow-x'] = 'visible'; }
        if ('hidden' === s['overflow-y']) { node.style['overflow-y'] = 'visible'; }
    });

    var htmlNode = document.querySelector('html');
    htmlNode.style['overflow'] = 'visible';
    htmlNode.style['overflow-x'] = 'visible';
    htmlNode.style['overflow-y'] = 'visible';

Building (Only if you want to contribute)

We're creating a bookmarklet, so our code needs to be minified and URL encoded.

Run the following the project root directory:

$ docker build . -t kill-sticky && docker run --rm -it -v $(pwd):/kill-sticky kill-sticky

This will update the project README.md with the build version.

You might also like...

A PHP Laravel web application that uses most of Laravel technologies to build that gym system

A PHP Laravel web application that uses most of Laravel technologies to build that gym system

A PHP Laravel web application that uses most of Laravel technologies to build that gym system.The System is based on rules. Admin, City Manager, Gym Manager. All Crud operations running using data tables.

Dec 29, 2022

This web application retrieves real live data from the SpaceX API

This web application retrieves real live data from the SpaceX API

This web application retrieves real live data from the SpaceX API. It provides commercial and scientific space travel services, by allowing users to book rockets and join selected space missions.

Aug 9, 2022

Drag and drop library for two-dimensional, resizable and responsive lists

GridList Drag and drop library for a two-dimensional resizable and responsive list of items Demo: http://hootsuite.github.io/grid/ The GridList librar

Dec 14, 2022

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures This repository contains JavaScript based examples of many popular algorithms and data structures. Each algo

Dec 31, 2022

A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

Readmore.js V3 alpha I am deprecating the 2.x version of Readmore.js. A new version is coming soon! Check it out and help me test it! Readmore.js A sm

Nov 30, 2022

FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

Sep 29, 2022

Defines the communication layer between mobile native(iOS/Android) and webview using JSON Schema and automatically generates SDK code

Defines the communication layer between mobile native(iOS/Android) and webview using JSON Schema and automatically generates SDK code.

Dec 8, 2022

A responsive image polyfill for picture, srcset, sizes, and more

Picturefill A responsive image polyfill. Authors: See Authors.txt License: MIT Picturefill has three versions: Version 1 mimics the Picture element pa

Dec 31, 2022

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

MixItUp 3 MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove D

Dec 24, 2022
Comments
  • Fix build; show more overflows

    Fix build; show more overflows

    Came across the repo in search of an updated kill sticky bookmarklet, that would fix those pesky hidden overflows. Nice project, thank you for sharing!

    When trying to build it, I noticed that some dependencies in the build chain seem to be requiring a fresher node, so bumped the base in the dockerfile to fix that.

    I also added another block of code to set to visible any hidden overflows within the html. The site that made me want to do this used overflow hidden on the body, but there are others doing the same on other content sections, divs etc.

    Take it if you find it useful, good luck!

    opened by imrekoszo 1
  • It didn't work on a site so I edited the script

    It didn't work on a site so I edited the script

    Here's the script I made cuz nothing worked. It finally worked when I edited body position. The class things is probably overkill.

    The site in question: https://www.infoworld.com/article/3663129/deno-deploy-moves-toward-ga-adds-paid-plan.html

    (() => {
      document.querySelectorAll("body *").forEach(function (node) {
        if (["fixed", "sticky"].includes(getComputedStyle(node).position)) {
          node.parentNode.removeChild(node);
        }
      });
    
      document.querySelectorAll("html *").forEach(function (node) {
        var s = getComputedStyle(node);
        if ("hidden" === s["overflow"]) {
          node.style["overflow"] = "visible !important";
        }
        if ("hidden" === s["overflow-x"]) {
          node.style["overflow-x"] = "visible !important";
        }
        if ("hidden" === s["overflow-y"]) {
          node.style["overflow-y"] = "visible !important";
        }
      });
    
      var htmlNode = document.querySelector("html");
      htmlNode.style["overflow"] = "visible !important";
      htmlNode.style["overflow-x"] = "visible !important";
      htmlNode.style["overflow-y"] = "visible !important";
    
      document.querySelectorAll("body *").forEach(function (node) {
        var s = getComputedStyle(node);
        if ("hidden" === s["overflow"]) {
          node.style["overflow"] = "visible !important";
        }
        if ("hidden" === s["overflow-x"]) {
          node.style["overflow-x"] = "visible !important";
        }
        if ("hidden" === s["overflow-y"]) {
          node.style["overflow-y"] = "visible !important";
        }
      });
    
      var bodyNode = document.querySelector("body");
      bodyNode.style["overflow"] = "visible !important";
      bodyNode.style["overflow-x"] = "visible !important";
      bodyNode.style["overflow-y"] = "visible !important";
    
      // attach 10 classes to body: class1, class2, ..., class10
    
      const range10 = [...Array(10).keys()];
      range10.forEach((i) => {
        bodyNode.classList.add(`class${i + 1}`);
      });
    
      // attach 10 classes to html
    
      range10.forEach((i) => {
        htmlNode.classList.add(`class${i + 1}`);
      });
    
      // create a style component and style so any body with these classes inside an html with these classes will be overflow: visible !important
    
      const style = document.createElement("style");
      style.innerHTML = `
      html.class1.class2.class3.class4.class5.class6.class7.class8.class9.class10 body.class1.class2.class3.class4.class5.class6.class7.class8.class9.class10 {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: relative !important;
      }
    `;
      document.head.appendChild(style);
    })();
    
    opened by Bestulo 0
  • Link to example offending page

    Link to example offending page

    Would be perfect if there was a link to an example page that this should "fix". I've added the bookmarklet but have no obvious way to test it except for waiting for the issue to present itself on a page "in the wild".

    opened by Perrow 2
Owner
Tim Martin
Tim Martin
The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

List.js Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on

Jonny Strömberg 10.9k Jan 1, 2023
Custom HTML elements for generic components (dropdown, modal...) without style.

Headless elements The goal of this project is to create a library of Custom Elements to stop reinventing the wheel (starting by reinventing the wheel

Jonathan 21 Sep 17, 2022
A simple implementation of a task list application that can be used to add, remove, edit and check users tasks

"To-do list" is a tool that helps to organize daily activites. It simply lists the things which are needed to be done and allows user to mark them as complete. In this step of project, the CRUD (create, update, delete) methods are implemented. This simple web page is built using webpack and served by a webpack dev server.

Zahra Arshia 5 Mar 28, 2022
A user script for the web that allows you to view and edit files in the Godot Web Editor

Godot-Web-File-Manager This is a user script for the web that allows you to view and edit files in the Godot Web Editor. You can even use this to enab

Roujel Williams 4 Jan 31, 2022
A Pauli Test simulation app made with Web Component and RxJS

There was a discussion quite a while ago in Teknologi Umum about brain throughput or something. Basically it was about how long does your brain can maintain its performance. It was brought up because there was a discussion about typing speed and how someone can get high Words per Minute at the start but starts to slow down the longer they go.

elianiva 5 Jun 8, 2022
Web app for adding EU Digital COVID Certificates to your wallet apps

Web app for adding EU Digital COVID Certificates to your wallet apps

CovidPass 1.2k Dec 31, 2022
A Sequelize web builder interface. To make your own sequelize schema

A Sequelize web builder interface. To make your own sequelize schema

Ulysse 5 Mar 9, 2022
Insider Unlocked is an ongoing web application

Insider Unlocked is an ongoing web application we have been co-developing for the past few months which aggregates stock trading data of US senators and presents it in a digestible manner for the average retail investor

null 3 Feb 13, 2022
A simple server application that allows you to perform Wake-on-LAN remotely with a web interface

WoL Helper A simple server application that allows you to perform Wake-on-LAN remotely with a web interface. Usage Install: npm install -g wol-helper

Hongbo 5 Jul 27, 2022
Estrela - a JavaScript library for building reactive web components inspired by lit

Estrela ⭐ Full Reactive Web Components Estrela is a JavaScript library for building reactive web components inspired by lit. Just like Lit, Estrela is

null 50 Oct 31, 2022