https://github.com/t-mart/kill-sticky Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code + Explore + All features + Documentation + GitHub Skills + Blog * Solutions + By Plan + Enterprise + Teams + Compare all + By Solution + CI/CD & Automation + DevOps + DevSecOps + Case Studies + Customer Stories + Resources * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles + Repositories + Topics + Trending + Collections * Pricing [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} t-mart / kill-sticky Public * Notifications * Fork 5 * Star 236 Bookmarklet to remove sticky elements and restore scrolling to web pages! 236 stars 5 forks Star Notifications * Code * Issues 2 * Pull requests 0 * Actions * Projects 0 * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Security * Insights t-mart/kill-sticky This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. master Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags 1 branch 0 tags Code * Clone HTTPS GitHub CLI [https://github.com/t] Use Git or checkout with SVN using the web URL. [gh repo clone t-mart] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @imrekoszo @t-mart imrekoszo and t-mart Fix weird formatting in readme ... 124a314 Nov 27, 2020 Fix weird formatting in readme 124a314 Git stats * 14 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time demo Clean up Apr 24, 2018 docs Clean up Apr 24, 2018 src Fix weird formatting in readme Nov 26, 2020 Dockerfile Update docker image Nov 26, 2020 Makefile Clean up Apr 24, 2018 README.md Fix weird formatting in readme Nov 26, 2020 View code kill-sticky Demo Background Installation Usage How the bookmarklet works Building (Only if you want to contribute) README.md 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: * Delete fixed position styled elements * Change hidden overflow styles to auto 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. About Bookmarklet to remove sticky elements and restore scrolling to web pages! Resources Readme Stars 236 stars Watchers 3 watching Forks 5 forks Releases No releases published Packages 0 No packages published Languages * JavaScript 68.8% * Dockerfile 21.3% * Makefile 9.9% Footer (c) 2022 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.