Last active
January 25, 2018 17:38
-
-
Save zcyzcy88/909b77054b88fd69e8a0834b84e7a68b to your computer and use it in GitHub Desktop.
Remove `position: fixed`
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Remove topbar | |
| // @namespace zcyzcy88 | |
| // @include * | |
| // @exclude https://twitter.com/* | |
| // @exclude https://www.youtube.com/* | |
| // @exclude https://cloud.google.com/* | |
| // @exclude https://developers.google.com/* | |
| // @grant none | |
| // ==/UserScript== | |
| (function () { | |
| /* find the topbar by coordinate */ | |
| var topbar | |
| var el = document.elementFromPoint(document.documentElement.clientWidth - 200, 20) | |
| while (el) { | |
| if (getComputedStyle(el).position == 'fixed') topbar = el | |
| el = el.parentNode; | |
| if (el == document.body) break | |
| } | |
| if (topbar == undefined) return | |
| /* disable position:fixed */ | |
| // topbar.style.position = 'absolute' | |
| // ↑ this line doesn't work well, because sometime offsetParent is not <body> | |
| // ↓ workaround | |
| var paint = function (enforce) { | |
| var scrollTop = document.documentElement.scrollTop || document.body.scrollTop | |
| var threshold = 200 | |
| if (!enforce && scrollTop > threshold * 3) return | |
| var offset = scrollTop / threshold | |
| if (offset > 1.2) offset = 1.2 | |
| topbar.style.transform = 'translateY(-' + offset * 100 + '%)' | |
| } | |
| paint(true) // initialize | |
| document.addEventListener('scroll', () => paint()) | |
| /* when use JS to frequently change CSS value, disable CSS transition to avoid weird delay */ | |
| // topbar.style.transition = 'transform 0s' | |
| // ↑ this line doesn't work because of compatibility | |
| // ↓ workaround | |
| topbar.classList.add('remove-topbar') | |
| var style = document.createElement('style') | |
| style.innerHTML = '.remove-topbar{transition:transform 0s !important}' | |
| document.head.appendChild(style) | |
| })() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Doesn't work on these pages?
https://www.icy-veins.com/
https://www.pcauthority.com.au/components