This is my most useful bookmark, I use it everywhere (it's even practical on an iphone)<p>So many sites have a top banner that disappears as you scroll down a page, but as soon as you scroll upwards even a little bit, it pops up again. This is immensely frustrating because I tend to read at the top of a page and scroll down as I'm reading. So if I scroll down slightly too far and then correct myself, the banner will instantly obscure the bit of the text I'm trying to read. It's very satisfying to be able to click on the bookmark and fix the site's crap design!
Honestly I have uBlock set in a way that blocks most of this stuff by default. I have several "steps" of permissivity:<p>1) (default) block all JS completely<p>2) Block 3rd party js<p>3) Permit all js (rare)<p>If the web fails to render in (1) and I do not necessarily need anything on that web I can get elsewhere, I just leave the web. F that web and F that creator. If I have to (webshop etc) I usualy just enable (2) which works most of the time. (3) is basically only for special webs like banking etc which is just PITA to debug as you have to be logging in constantly etc.<p>Websites today are just full of unnecessary crap and are downright unusable when on slower connection like 3G. Most of the webs now require your browser to download 2M of JS to have "slide out menus" or some other stupid stuff. uBlock is a must, because without that you will run out of data plan almost instantly.<p>And to make things worse, Chromium-based browsers will make adblocking much harder with Manifest v3. As soon as this happens, I will go to Firefox. And after that probably Links (unironically).<p>Btw spinning up a docker to shrink 1 JS function to a oneliner is perfectly capturing the essence of what's wrong with web nowdays :-D
I use this all the time, it's invaluable. I also use it to remove sticky headers, which I find to be deeply annoying because they waste space and often break keyboard scrolling by scrolling the next few lines of text under the header.<p>In Firefox I've assigned it a keyword shortcut, so I can type `ctrl + l` to select the address bar, then `ks` `<enter>` to execute the JS without having to click.
I feel I'm getting close to the point where I'm just going to start disabling CSS and JS for normal web browsing, only whitelisting certain sites that 1. I have to use and 2. Simply don't work at all without CSS/JS. IMO browsers have abandoned their role as the "user's agent" and handed over entirely too much control over style, presentation and function to web developers. The fact that you need plugins, extensions, adblocks, bookmarklets, and so on, just to regain this control should be troubling but I guess progress has to march on.<p>I know I'm in the tiny minority here and firmly in the "yelling at the clouds" territory, but I really wish we could go back to the simpler times of the web being hyperTEXT documents linked together and that's it.
Browsers were able to fight window.open popups back in the day by intercepting/blocking the window.open API. This was, iirc, one of the killer features of firefox back in the day. But cat and mouse: websites are now abusing CSS to recreate the popup experience.<p>Bookmarklets like this are helpful (and this is a great successor), but bookmarklets are very difficult to install and use for the average internet user. I could not figure out how to install this on my iPhone without using desktop Safari to sync bookmarks.<p>Is there any hope of browsers being able to combat popup modals and other sticky gross things in an automated (and on by default) way that doesn't totally break sites that require sticky items for navigation or other, non-hostile features?
I seriously don't understand why some people seem to like position:sticky so much. It's really offensive when the element I'm trying to scroll out of the way refuses to leave and clings to the edge, almost mockingly.<p>I've had a "replace sticky with relative" filter in my MITM proxy since the day that CSS misfeature showed up in browsers.
I used that for a while, but I was using it so often that I installed <a href="https://addons.mozilla.org/en-US/firefox/addon/alwayskillsticky/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/alwayskillsti...</a>. Sometimes I see things flicker briefly into view and I'm reminded that it's working. I've had to whitelist several sites that I use regularly, but it's pretty low maintenance after that.
Similar thing I made recently, but as a Chrome extension:<p><a href="https://github.com/szhu/pagefreeze" rel="nofollow">https://github.com/szhu/pagefreeze</a><p>It does the same thing, and in addition also prevents any async JS from running. It also can be easily toggled per-site; just click the extension icon! Unfortunately I didn't have time to put a GIF in the README. OP did a better job of explaining what their project does!<p>Would love feedback on it + hope it helps someone as well!
Is there a way to do this on mobile? Probably not an easy one, but if mobile Safari had an extension, I'd install it immediately.<p>The worst is when you use the top edge of the screen to read, but the site has a navbar that only shows up when you scroll up. So if you scroll slowly upwards, the navbar creeps slowly downwards, and keeps hiding the text you're trying to read. Thankfully such design choices seem to be getting rarer.<p>Do sticky headers measurably increase conversion rates, or is it a fad? If there's data to support why people keep making this decision, I guess I could be persuaded to feel that it's not a case of "Everyone likes to do it their way, and you like your way."
Reminder that you can also configure persistent rules to do this with your favorite wide-spectrum blocker:<p><pre><code> example.com###annoying-header:style(position: unset !important)
example.com##.restrictive-box:style(overflow: unset !important)</code></pre>
I spent an afternoon trying to figure out how to detect when an element had its display or transform properties changed when it was also the full size of the screen. This was my proposed heuristic for deciding when something was a full screen popup, in the process of taking over your window. The idea would be to zap these elements when they were triggered, so that you'd not have to encounter them in the first place.<p>Cool story huh? Anyway, that never went anywhere, but I'd donate to an open source project if a better programmer than me wanted to take on this noble struggle.
I use this often. However I sometimes want the sticky part to stay where it initially rendered on the page, like a nav bar. Perhaps I don't know enough CSS but anyone know how I can do that?
Fantastic. Making the web a less awful place, one workaround at a time. You've got my bookmark.<p>Now, make an auto-detect for this and stick it into something like uBlockOrigin and we're golden. :)
I use an addon called "nuke anything" that lets you right click and remove pretty much anything (only until the page is reloaded). It's a lifesaver when you browse with JS disabled since that can cause pages to display poorly (menus spewed all over the screen for example) but it comes in handy a lot for sticky elements. I have seen a few sites that manage to prevent certain things from being selected though. It's nice to have yet another tool to fall back on if I need it.
I find this very useful.<p>On Unix, when you have Node.js installed, you can avoid the Docker overhead for creation of a bookmarklet from a JS file with a shell script like this:<p><pre><code> cat 'kill-sticky.js' \
| tr -s '\011\012\015\040' '\040' \
| node -e 'console.log(`javascript:${encodeURIComponent(fs.readFileSync(process.stdin.fd).toString())}`)'
</code></pre>
Insert the output as your bookmarklet's URL.
I sometimes end up on pages that I can't scroll. It turns out some pages show a sticky div with a cookie consent dialog, and uBlock has removed it but left the overflow: hidden on the body tag that the site owner found necessary to put there until I click on the now removed div for some reason.
I have this addon: <a href="https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/</a> installed on Firefox. Use it more than I'd like.
Ha, wow, I wrote my own (much less fancy) bookmarklet that does this and also called it Kill Sticky:<p>javascript:for(e%20of%20document.querySelectorAll(%22body%20*%22))%7Bp=getComputedStyle(e).position;if((p===%22fixed%22)%7C%7C(~p.indexOf(%22sticky%22)))e.parentNode.removeChild(e);%7D
Unfortunately, bookmarklets don't work on Firefox mobile. Fortunately however, the "Hide Fixed Elements" and "Scroll Everywhere" add-ons <i>do</i> work on mobile:<p><a href="https://addons.mozilla.org/en-US/firefox/addon/hide-fixed-elements/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/hide-fixed-el...</a><p><a href="https://addons.mozilla.org/en-US/firefox/addon/scroll-everywhere/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/scroll-everyw...</a><p>That is, if you jump through the hoops to make more than the default 8 add-ons available on Firefox mobile:<p><a href="https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/" rel="nofollow">https://blog.mozilla.org/addons/2020/09/29/expanded-extensio...</a>
Tried this script on a handful of different websites - news, tech, forums, reddit. In 100% of cases this scripts nukes top header completely, leaving me without navbar or menu. So it is a very enticing tool, but unfortunately not usable.
> Set the style of the html node for overflow: auto<p>I have a custom style to do this for ALL sites, warning:<p>1. it can break websites in unexpected ways<p>2. There's often a class on the <body> hiding overflow that needs to be overwritten instead/as well
You could pass this code into Tampermonkey/Violentmonkey[0] and use it globally on every domain.<p>[0] <a href="https://violentmonkey.github.io/" rel="nofollow">https://violentmonkey.github.io/</a>
Sticky positioning on mobile devices is rarely a good experience. (Though it might be my tiny phone screen.) I would love for it to get special treatment on mobile so it could always be dismissed or something.
i wish there was a way, with CSS only, to specifically target existing css rules, and have one rule change to another rule, globally. for instance, something like: [position:fixed] { position:relative }. i.e. that is different than * { position:relative }, because it doesn't apply position:relative to everything, it only changes position:fixed to position:relative.