7 ms·

Kill-sticky, a bookmarklet to remove sticky elements and restore scrolling

395 points by ivank 4y ago

cercatrova 4y ago
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?
- redweer 4y ago
  replace `position: sticky` with `position: relative`
- Avery3R 4y ago
  There's static ding that'll make turn the sticky/floating elements into normal ones https://www.staticding.org/ https://www.staticding.org/ it does put a little overlay telling you how many elements it adjusted, but you can remove that with a couple modified lines in the source.
- dekatron 4y ago
  Just replace the `node.parentNode.removeChild(node);` line with `node.style['position'] = 'static';`. With this, you can 'un-sticky' the element instead of removing it. Here's the URL-encoded bookmarklet code with the above change: javascript:(function()%7Bdocument.querySelectorAll('body%20*').forEach(function(node)%20%7Bif%20(%5B'fixed'%2C%20'sticky'%5D.includes(getComputedStyle(node).position))%20%20%7Bnode.style%5B'position'%5D%20%3D%20'static'%3B%7D%7D)%3Bdocument.querySelectorAll('html%20*').forEach(function(node)%20%7Bvar%20s%20%3D%20getComputedStyle(node)%3Bif%20('hidden'%20%3D%3D%3D%20s%5B'overflow'%5D)%20%7B%20node.style%5B'overflow'%5D%20%3D%20'visible'%3B%20%7Dif%20('hidden'%20%3D%3D%3D%20s%5B'overflow-x'%5D)%20%7B%20node.style%5B'overflow-x'%5D%20%3D%20'visible'%3B%20%7Dif%20('hidden'%20%3D%3D%3D%20s%5B'overflow-y'%5D)%20%7B%20node.style%5B'overflow-y'%5D%20%3D%20'visible'%3B%20%7D%7D)%3Bvar%20htmlNode%20%3D%20document.querySelector('html')%3BhtmlNode.style%5B'overflow'%5D%20%3D%20'visible'%3BhtmlNode.style%5B'overflow-x'%5D%20%3D%20'visible'%3BhtmlNode.style%5B'overflow-y'%5D%20%3D%20'visible'%7D)()
jerrygoyal 4y ago
People who are using some other bookmarklets, could you share so others can benefit as well?
- arantius 4y ago
  I wrote https://bookmarklets.arantius.com/unfix https://bookmarklets.arantius.com/unfix several years back. Ended up using the "nuke" variant in practice.
1970-01-01 4y ago
Just wanted to thank you for making this. It's working perfectly with Twitter.
acabal 4y ago
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. 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.
- jakzurr 4y ago
  Same. Showed my sister, and we've both been using for about a year. Works more often than not. (OMG what a relief.)
- krick 4y ago
  Thanks for the keyword tip, IDK why I never used it.
curlftpfs 4y ago
> Set the style of the html node for overflow: auto I have a custom style to do this for ALL sites, warning: 1. it can break websites in unexpected ways 2. There's often a class on the <body> hiding overflow that needs to be overwritten instead/as well
ARandomerDude 4y ago
I kill sticky elements with the back button. If a site wants to hassle me, I won't give them attention or ad money.
- thih9 4y ago
  What sites do you visit that don’t have sticky elements? I’m curious because I’d love to visit sites like these too. Meanwhile most social media, blogs, news sites and probably most HN submissions too have some.
  - thehappypm 4y ago
    This web site
- sexy_seedbox 4y ago
  Even documentation sites using position: sticky for the Table of Contents usefully showing you all the sections and subsections as you scroll?
  - GoblinSlayer 4y ago
    Which? At least wikipedia, W3C, IETF, man pages and msdn don't.
    - Y-bar 4y ago
      MDN considers it useful here for example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ta...
bauble 4y ago
I used that for a while, but I was using it so often that I installed https://addons.mozilla.org/en-US/firefox/addon/alwayskillsticky/ https://addons.mozilla.org/en-US/firefox/addon/alwayskillsti.... 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.
sillysaurusx 4y ago
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. 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. 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."
- aaaaaaaaaaab 4y ago
  Via Shortcuts: https://imgur.com/a/FRy12rp https://imgur.com/a/FRy12rp
- tobr 4y ago
  Bookmarklets work fine on iOS Safari last time I checked. You have to add a bookmark for some random page, then go back in and edit it, though.
  - vmoore 4y ago
    > Bookmarklets work fine on iOS Safari Does the bookmarklet get executed for the current open tab?
    - happyopossum 4y ago
      Yup
  - happyopossum 4y ago
    It’s a bit easier to set it up on desktop safari and let iCloud sync it over for you…
- joosters 4y ago
  You can add it to a bookmark/favourites, then just tapping on it from the favourites page will work as expected. It works pretty well in Safari.
vmoore 4y ago
You could pass this code into Tampermonkey/Violentmonkey[0] and use it globally on every domain. [0] https://violentmonkey.github.io/ https://violentmonkey.github.io/
joosters 4y ago
This is my most useful bookmark, I use it everywhere (it's even practical on an iphone) 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!
- svnpenn 4y ago
  Yes, yes, yes! I am so sick of sites putting fixed top bar, and fixed side bars as well. Add "clever" bar animation in as well, and you get the awful UX we have today. Classic case of people inventing a problem to solve.
  - darepublic 4y ago
    For some ui, fixed sidebar is fine imo. The headers that scroll down with you, on the other hand, can go extinct
    - JoshTriplett 4y ago
      Fixed sidebar doesn't work well for mobile devices. A button to show them works, though.
      - darepublic 4y ago
        yes I mean on desktop. Original comment was something along the lines of all position fixed is bad, which I don't agree with. If it doesn't cause distress, doesn't distract the user, I don't take issue with it.
  - Kerrick 4y ago
    It's not just the awful UX of today. It's the awful UX of yesteryear, except this time it's the website owner's fault. https://i.stack.imgur.com/pOAAU.jpg https://i.stack.imgur.com/pOAAU.jpg
fisherjeff 4y ago
Ha, wow, I wrote my own (much less fancy) bookmarklet that does this and also called it Kill Sticky: 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
- rasz 4y ago
  mine kept growing every time I stumbled on a page with new hostile sticky situation: javascript:(function(){void([].forEach.call(document.querySelectorAll('body *'),e=>/fixed|sticky/.test(getComputedStyle(e).position)&&e.parentNode.removeChild(e)));document.body.style = 'overflow:auto !important; height:100% !important;';document.body.removeAttribute("class");document.firstElementChild.removeAttribute("style");document.firstElementChild.removeAttribute("class")})()
ryandrake 4y ago
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. 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.
- hrbf 4y ago
  Many “content” sites are so annoying to use now that I almost reflexively click the “Reader” view and/or save it to Instapaper. If that doesn’t work, I abandon the site.
  - bityard 4y ago
    Developers: I would pay for a firefox or chrome extension that lets you just toggle the whole browsing session or tab into reader mode
    - spicybright 4y ago
      If it can be seamless, as in I don't have to see each page half-rendering before switching to reading mode, I'd definitely throw money at it.
    - masukomi 4y ago
      I've regularly wished for a browser that was "reader mode" by default, and had a button for "unreadable mode"
      - permo-w 4y ago
        I have reader mode on by default in Brave, but it doesn’t always work and (at least sometimes) doesn’t display images from the article. reader mode is extremely non-trivial to implement
aendruk 4y ago
Reminder that you can also configure persistent rules to do this with your favorite wide-spectrum blocker: example.com###annoying-header:style(position: unset !important) example.com##.restrictive-box:style(overflow: unset !important)
- BrianOnHN 4y ago
  > your favorite wide-spectrum blocker Sunscreen? Bookmarklets are underutilized. They can even be utilized to automate simple tasks that I used to use INSERT MACRO PROGRAM NAME to do. The downside is lack of mobile availability.
szhu 4y ago
Similar thing I made recently, but as a Chrome extension: https://github.com/szhu/pagefreeze https://github.com/szhu/pagefreeze 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! Would love feedback on it + hope it helps someone as well!
- darepublic 4y ago
  You override window.addEventListener? At that point I think you may as well just use nojs
  - szhu 4y ago
    That doesn't work well, a lot of news websites and React-powered blogs need that initial load or else the page is all blank!
sp332 4y ago
Is there something that will prevent Medium pages from scrolling to the top when you reload the page?
- stjohnswarts 4y ago
  why do you want to reload a page that you are currently on? if you want to go quickly to top/bottom of a page just use home/end keys
  - sp332 4y ago
    Well it comes up most often when I restart Firefox. When I switch back to the tab, it reloads it and loses my place.
ryanianian 4y ago
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. 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. 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?
- aaaaaaaaaaab 4y ago
  One way or another, the endgame is going to be websites which are nothing but a fullscreen WebGL canvas driven by webassembly. Things will steadily devolve for users from that point. Then we’ll need about ten years for the next generation of hypermedia to surface, which hopefully won’t have Turing-complete scripting on principle. But I’m not sure whether developers are smart enough to avoid repeating the same mistakes again and again…
  - postalrat 4y ago
    Why a canvas with webassembly? Just a single video element with everything rendered on the server gives them the most control.
    - aaaaaaaaaaab 4y ago
      Stadia and GeForce Now already does this. But I don't think this will be the business model of the Web at large. Server costs would be too high. Webassembly blobs with WebGL gives you the sweet spot by offloading the compute cost to the user while stripping them practically all of their freedoms.
  - aendruk 4y ago
    That may just be the day I stop using the web. I can picture it now: Me, neo-luddite, weathered and bitter, strung between the maw of capitalism and the precious tranquility of my crafted world.
autoexec 4y ago
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.
- axiolite 4y ago
  uBlock Origin includes an "element picker" which allows blocking elements (permanently), this almost eliminates the need for Nuke Anything.
  - autoexec 4y ago
    Yeah, I put that to work a lot too, but nuke anything is great for sites you're probably not going to visit more than once since it doesn't clutter up your filter list just to get something out of your way (I'll even remove images or menus if they're distracting me from content while reading). If I do add a random one off website to uBO it's usually because they did something really obnoxious and I was like "Never again!"
    - hoppyhoppy2 4y ago
      uBlock Origin's Element Zapper (as opposed to the Element Picker) will zap any element without creating a persistent filter. https://github.com/gorhill/uBlock/wiki/Element-zapper https://github.com/gorhill/uBlock/wiki/Element-zapper
      - autoexec 4y ago
        nice! The visual feedback while making a selection is a big plus
        anonymousab 4y ago
deleted 4y ago
[deleted]
marcodiego 4y ago
I have this addon: https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/ https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/ installed on Firefox. Use it more than I'd like.
axiolite 4y ago
Unfortunately, bookmarklets don't work on Firefox mobile. Fortunately however, the "Hide Fixed Elements" and "Scroll Everywhere" add-ons do work on mobile: https://addons.mozilla.org/en-US/firefox/addon/hide-fixed-elements/ https://addons.mozilla.org/en-US/firefox/addon/hide-fixed-el... https://addons.mozilla.org/en-US/firefox/addon/scroll-everywhere/ https://addons.mozilla.org/en-US/firefox/addon/scroll-everyw... That is, if you jump through the hoops to make more than the default 8 add-ons available on Firefox mobile: https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/ https://blog.mozilla.org/addons/2020/09/29/expanded-extensio...
- anonymousab 4y ago
  There is an addon equivalent to the bookmarklet: https://addons.mozilla.org/en-CA/firefox/addon/kill-sticky/ https://addons.mozilla.org/en-CA/firefox/addon/kill-sticky/ It works on Firefox for Android / Fenix. You'd need to use the Nightly app and a custom addon group to install it, though.
- coronasaurus 4y ago
  Yeah they do, add it as a bookmark and launch from address bar. I do it on Firefox for Android and Bromite all the time.
- graton 4y ago
  This bookmarklet worked for me using Firefox on Android. Not sure why you think it doesn't work.
  - jerrygoyal 4y ago
    > This bookmarklet worked for me using Firefox on Android do you happen to use some other version of Firefox? I tested for stackoverflow and it didn't work. There's also a open bug about bookmarklets not working on android Firefox https://github.com/mozilla-mobile/fenix/issues/2871 https://github.com/mozilla-mobile/fenix/issues/2871
    - 4y ago
karaterobot 4y ago
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. 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.
userbinator 4y ago
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. I've had a "replace sticky with relative" filter in my MITM proxy since the day that CSS misfeature showed up in browsers.
- retcore 4y ago
  I'm convinced that position:sticky wouldn't exist if browsers weren't beholden to advertising traffic. Someone needs to create a rival foundation to Mozilla, with some advertising and transaction processing chops, figure out how to sustain enough revenue to tax deduct enough smart promotion, and ideally, I'd personally wish, fork Pale Moon. The German Zugabeverordnung law was very strict against any "free" commercial offer tied to the obscuring of linked purchases. But instead of being extended to embrace the creation of sponsored funnels providing free entertainment websites, as is probably now long forgotten but fallacious doctrine, the internet instead made "free", "free". https://marketinglaw.osborneclarke.com/marketing-techniques/germany-finally-scraps-1930s-law/ https://marketinglaw.osborneclarke.com/marketing-techniques/... https://competition-attorneys.de/lawyer/zugabeverordnung-german-ordinance-on-bonuses/ https://competition-attorneys.de/lawyer/zugabeverordnung-ger... The law was scrapped in 2004, unlikely [ed] not [/ed] coincidentally with establishing peak web commercial libertarian lobbying, the more political and in earnest post dotbomb.
- deergomoo 4y ago
  position: sticky; makes tons of sense for web apps. It’s very common to want toolbars or menus always visible. I don’t think anyone in their right mind would claim that, for example, MS Word would be better if you needed to scroll to the top of the document to see any of the controls.
  - userbinator 4y ago
    I don’t think anyone in their right mind would claim that, for example, MS Word would be better if you needed to scroll to the top of the document to see any of the controls. That's position:fixed or perhaps position:absolute, not position:sticky. And honestly, the former two are far less annoying to experience because they're there from the beginning, while the latter trick you into thinking they can be scrolled out of sight, but don't.
Night_Thastus 4y ago
Fantastic. Making the web a less awful place, one workaround at a time. You've got my bookmark. Now, make an auto-detect for this and stick it into something like uBlockOrigin and we're golden. :)
alphabet9000 4y ago
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.
bsimpson 4y ago
It's wild that you have to set up Docker to contribute to 600 characters of JavaScript. It's like building a robot to pass the butter.
- krick 4y ago
  You don't really have to. It's just minification and stuff, just a build step, I suppose the owner could do that as well, if your contribution has any value, but you didn't do it properly. Do you know a better way to build/minify js? Perhaps you have all these npm packages installed on your PC already? I don't, and I don't want to. If Dockerfile wasn't included I'd have to make my own just to run any fucking build-tools it requires to make a bookmarklet (which I most likely wouldn't bother to do). And, yeah, it requires them, this is not some optional stuff that author did just to be fancy. You could set up some CI to make automatic builds after merging to master, but that still wouldn't solve the problem of contributor wanting to test what he wrote.
  - bsimpson 4y ago
    I've never used Docker (nor make). From the outside, it feels like some heavy VM thing for building isolated systems in the cloud. It's not something I'm used to seeing in the client-side ecosystem. I just took a second look at the repo, and realized there's no package.json. Typically, an open-source JavaScript project would have one. It would enumerate the dependencies and how they work together to generate the final output. As a JavaScript contributor, I expect to be able to type yarn yarn run build into any repo to generate the output (and test any changes I've made). I suspect the interactive web is not the author's primary platform. That's fine - it's his project; he can structure it however he wants. I was just surprised to see an unfamiliar, nontrivial dependency to concatenate a handful of lines into a bookmarklet. Since you asked "Do you know a better way?" you can port the `npm install` line to a dictionary of dependencies in package.json. You can use wireit in that same file to chain the CLIs together, accomplishing what's currently the ENTRYPOINT line in Dockerfile. It does the same thing that the current setup does, but it follows the conventions of the ecosystem. This makes it more available to external contributors, because they don't have to learn/install tools like Docker that aren't typically seen in JS.
vlunkr 4y ago
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.
_V_ 4y ago
Honestly I have uBlock set in a way that blocks most of this stuff by default. I have several "steps" of permissivity: 1) (default) block all JS completely 2) Block 3rd party js 3) Permit all js (rare) 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. 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. 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). 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
- zagrebian 4y ago
  Why are you waiting to switch to Firefox?
- DavideNL 4y ago
  Yea, it's amazing how much faster everything is when blocking 3rd party javascript with uBlock Origin by default. I expected many websites would stop working, surprisingly though many sites work times, and i simply: - hit my shortcut to set uBlock Origin to "relax" mode whenever needed - exclude a few CDN's - use a different browser (in private mode) for shopping and such
- mgaunard 4y ago
  Limited data plans? Do you live in the past?
  - Saris 4y ago
    Every cell provider in the US still has them.
sorenjan 4y ago
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.
tempodox 4y ago
I find this very useful. 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: cat 'kill-sticky.js' \ | tr -s '\011\012\015\040' '\040' \ | node -e 'console.log(`javascript:${encodeURIComponent(fs.readFileSync(process.stdin.fd).toString())}`)' Insert the output as your bookmarklet's URL.
Yizahi 4y ago
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.
sf_rob 4y ago
Is there a purpose built bookmarklet searchable repository anywhere like there are for extensions/addons?

395 points by ivank 4y ago

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?

redweer 4y ago
replace `position: sticky` with `position: relative`
Avery3R 4y ago
There's static ding that'll make turn the sticky/floating elements into normal ones https://www.staticding.org/ https://www.staticding.org/ it does put a little overlay telling you how many elements it adjusted, but you can remove that with a couple modified lines in the source.
dekatron 4y ago
Just replace the `node.parentNode.removeChild(node);` line with `node.style['position'] = 'static';`. With this, you can 'un-sticky' the element instead of removing it. Here's the URL-encoded bookmarklet code with the above change: javascript:(function()%7Bdocument.querySelectorAll('body%20*').forEach(function(node)%20%7Bif%20(%5B'fixed'%2C%20'sticky'%5D.includes(getComputedStyle(node).position))%20%20%7Bnode.style%5B'position'%5D%20%3D%20'static'%3B%7D%7D)%3Bdocument.querySelectorAll('html%20*').forEach(function(node)%20%7Bvar%20s%20%3D%20getComputedStyle(node)%3Bif%20('hidden'%20%3D%3D%3D%20s%5B'overflow'%5D)%20%7B%20node.style%5B'overflow'%5D%20%3D%20'visible'%3B%20%7Dif%20('hidden'%20%3D%3D%3D%20s%5B'overflow-x'%5D)%20%7B%20node.style%5B'overflow-x'%5D%20%3D%20'visible'%3B%20%7Dif%20('hidden'%20%3D%3D%3D%20s%5B'overflow-y'%5D)%20%7B%20node.style%5B'overflow-y'%5D%20%3D%20'visible'%3B%20%7D%7D)%3Bvar%20htmlNode%20%3D%20document.querySelector('html')%3BhtmlNode.style%5B'overflow'%5D%20%3D%20'visible'%3BhtmlNode.style%5B'overflow-x'%5D%20%3D%20'visible'%3BhtmlNode.style%5B'overflow-y'%5D%20%3D%20'visible'%7D)()

jerrygoyal 4y ago

People who are using some other bookmarklets, could you share so others can benefit as well?

arantius 4y ago
I wrote https://bookmarklets.arantius.com/unfix https://bookmarklets.arantius.com/unfix several years back. Ended up using the "nuke" variant in practice.

1970-01-01 4y ago

Just wanted to thank you for making this. It's working perfectly with Twitter.

acabal 4y ago

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. 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.

jakzurr 4y ago
Same. Showed my sister, and we've both been using for about a year. Works more often than not. (OMG what a relief.)
krick 4y ago
Thanks for the keyword tip, IDK why I never used it.

curlftpfs 4y ago

> Set the style of the html node for overflow: auto I have a custom style to do this for ALL sites, warning: 1. it can break websites in unexpected ways 2. There's often a class on the <body> hiding overflow that needs to be overwritten instead/as well

ARandomerDude 4y ago

I kill sticky elements with the back button. If a site wants to hassle me, I won't give them attention or ad money.

thih9 4y ago
What sites do you visit that don’t have sticky elements? I’m curious because I’d love to visit sites like these too. Meanwhile most social media, blogs, news sites and probably most HN submissions too have some.
- thehappypm 4y ago
  This web site
sexy_seedbox 4y ago
Even documentation sites using position: sticky for the Table of Contents usefully showing you all the sections and subsections as you scroll?
- GoblinSlayer 4y ago
  Which? At least wikipedia, W3C, IETF, man pages and msdn don't.
  - Y-bar 4y ago
    MDN considers it useful here for example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ta...

bauble 4y ago

I used that for a while, but I was using it so often that I installed https://addons.mozilla.org/en-US/firefox/addon/alwayskillsticky/ https://addons.mozilla.org/en-US/firefox/addon/alwayskillsti.... 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.

sillysaurusx 4y ago

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. 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. 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."

aaaaaaaaaaab 4y ago
Via Shortcuts: https://imgur.com/a/FRy12rp https://imgur.com/a/FRy12rp
tobr 4y ago
Bookmarklets work fine on iOS Safari last time I checked. You have to add a bookmark for some random page, then go back in and edit it, though.
- vmoore 4y ago
  > Bookmarklets work fine on iOS Safari Does the bookmarklet get executed for the current open tab?
  - happyopossum 4y ago
    Yup
- happyopossum 4y ago
  It’s a bit easier to set it up on desktop safari and let iCloud sync it over for you…
joosters 4y ago
You can add it to a bookmark/favourites, then just tapping on it from the favourites page will work as expected. It works pretty well in Safari.

vmoore 4y ago

You could pass this code into Tampermonkey/Violentmonkey[0] and use it globally on every domain. [0] https://violentmonkey.github.io/ https://violentmonkey.github.io/

joosters 4y ago

This is my most useful bookmark, I use it everywhere (it's even practical on an iphone) 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!

svnpenn 4y ago
Yes, yes, yes! I am so sick of sites putting fixed top bar, and fixed side bars as well. Add "clever" bar animation in as well, and you get the awful UX we have today. Classic case of people inventing a problem to solve.
- darepublic 4y ago
  For some ui, fixed sidebar is fine imo. The headers that scroll down with you, on the other hand, can go extinct
  - JoshTriplett 4y ago
    Fixed sidebar doesn't work well for mobile devices. A button to show them works, though.
    - darepublic 4y ago
      yes I mean on desktop. Original comment was something along the lines of all position fixed is bad, which I don't agree with. If it doesn't cause distress, doesn't distract the user, I don't take issue with it.
- Kerrick 4y ago
  It's not just the awful UX of today. It's the awful UX of yesteryear, except this time it's the website owner's fault. https://i.stack.imgur.com/pOAAU.jpg https://i.stack.imgur.com/pOAAU.jpg

fisherjeff 4y ago

Ha, wow, I wrote my own (much less fancy) bookmarklet that does this and also called it Kill Sticky: 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

rasz 4y ago
mine kept growing every time I stumbled on a page with new hostile sticky situation: javascript:(function(){void([].forEach.call(document.querySelectorAll('body *'),e=>/fixed|sticky/.test(getComputedStyle(e).position)&&e.parentNode.removeChild(e)));document.body.style = 'overflow:auto !important; height:100% !important;';document.body.removeAttribute("class");document.firstElementChild.removeAttribute("style");document.firstElementChild.removeAttribute("class")})()

ryandrake 4y ago

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. 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.

hrbf 4y ago
Many “content” sites are so annoying to use now that I almost reflexively click the “Reader” view and/or save it to Instapaper. If that doesn’t work, I abandon the site.
- bityard 4y ago
  Developers: I would pay for a firefox or chrome extension that lets you just toggle the whole browsing session or tab into reader mode
  - spicybright 4y ago
    If it can be seamless, as in I don't have to see each page half-rendering before switching to reading mode, I'd definitely throw money at it.
  - masukomi 4y ago
    I've regularly wished for a browser that was "reader mode" by default, and had a button for "unreadable mode"
    - permo-w 4y ago
      I have reader mode on by default in Brave, but it doesn’t always work and (at least sometimes) doesn’t display images from the article. reader mode is extremely non-trivial to implement

aendruk 4y ago

Reminder that you can also configure persistent rules to do this with your favorite wide-spectrum blocker: example.com###annoying-header:style(position: unset !important) example.com##.restrictive-box:style(overflow: unset !important)

BrianOnHN 4y ago
> your favorite wide-spectrum blocker Sunscreen? Bookmarklets are underutilized. They can even be utilized to automate simple tasks that I used to use INSERT MACRO PROGRAM NAME to do. The downside is lack of mobile availability.

szhu 4y ago

Similar thing I made recently, but as a Chrome extension: https://github.com/szhu/pagefreeze https://github.com/szhu/pagefreeze 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! Would love feedback on it + hope it helps someone as well!

darepublic 4y ago
You override window.addEventListener? At that point I think you may as well just use nojs
- szhu 4y ago
  That doesn't work well, a lot of news websites and React-powered blogs need that initial load or else the page is all blank!

sp332 4y ago

Is there something that will prevent Medium pages from scrolling to the top when you reload the page?

stjohnswarts 4y ago
why do you want to reload a page that you are currently on? if you want to go quickly to top/bottom of a page just use home/end keys
- sp332 4y ago
  Well it comes up most often when I restart Firefox. When I switch back to the tab, it reloads it and loses my place.

ryanianian 4y ago

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. 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. 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?

aaaaaaaaaaab 4y ago
One way or another, the endgame is going to be websites which are nothing but a fullscreen WebGL canvas driven by webassembly. Things will steadily devolve for users from that point. Then we’ll need about ten years for the next generation of hypermedia to surface, which hopefully won’t have Turing-complete scripting on principle. But I’m not sure whether developers are smart enough to avoid repeating the same mistakes again and again…
- postalrat 4y ago
  Why a canvas with webassembly? Just a single video element with everything rendered on the server gives them the most control.
  - aaaaaaaaaaab 4y ago
    Stadia and GeForce Now already does this. But I don't think this will be the business model of the Web at large. Server costs would be too high. Webassembly blobs with WebGL gives you the sweet spot by offloading the compute cost to the user while stripping them practically all of their freedoms.
- aendruk 4y ago
  That may just be the day I stop using the web. I can picture it now: Me, neo-luddite, weathered and bitter, strung between the maw of capitalism and the precious tranquility of my crafted world.

autoexec 4y ago

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.

axiolite 4y ago
uBlock Origin includes an "element picker" which allows blocking elements (permanently), this almost eliminates the need for Nuke Anything.
- autoexec 4y ago
  Yeah, I put that to work a lot too, but nuke anything is great for sites you're probably not going to visit more than once since it doesn't clutter up your filter list just to get something out of your way (I'll even remove images or menus if they're distracting me from content while reading). If I do add a random one off website to uBO it's usually because they did something really obnoxious and I was like "Never again!"
  - hoppyhoppy2 4y ago
    uBlock Origin's Element Zapper (as opposed to the Element Picker) will zap any element without creating a persistent filter. https://github.com/gorhill/uBlock/wiki/Element-zapper https://github.com/gorhill/uBlock/wiki/Element-zapper
    - autoexec 4y ago
      nice! The visual feedback while making a selection is a big plus
      - anonymousab 4y ago

deleted 4y ago

[deleted]

marcodiego 4y ago

I have this addon: https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/ https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/ installed on Firefox. Use it more than I'd like.

axiolite 4y ago

Unfortunately, bookmarklets don't work on Firefox mobile. Fortunately however, the "Hide Fixed Elements" and "Scroll Everywhere" add-ons do work on mobile: https://addons.mozilla.org/en-US/firefox/addon/hide-fixed-elements/ https://addons.mozilla.org/en-US/firefox/addon/hide-fixed-el... https://addons.mozilla.org/en-US/firefox/addon/scroll-everywhere/ https://addons.mozilla.org/en-US/firefox/addon/scroll-everyw... That is, if you jump through the hoops to make more than the default 8 add-ons available on Firefox mobile: https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/ https://blog.mozilla.org/addons/2020/09/29/expanded-extensio...

anonymousab 4y ago
There is an addon equivalent to the bookmarklet: https://addons.mozilla.org/en-CA/firefox/addon/kill-sticky/ https://addons.mozilla.org/en-CA/firefox/addon/kill-sticky/ It works on Firefox for Android / Fenix. You'd need to use the Nightly app and a custom addon group to install it, though.
coronasaurus 4y ago
Yeah they do, add it as a bookmark and launch from address bar. I do it on Firefox for Android and Bromite all the time.
graton 4y ago
This bookmarklet worked for me using Firefox on Android. Not sure why you think it doesn't work.
- jerrygoyal 4y ago
  > This bookmarklet worked for me using Firefox on Android do you happen to use some other version of Firefox? I tested for stackoverflow and it didn't work. There's also a open bug about bookmarklets not working on android Firefox https://github.com/mozilla-mobile/fenix/issues/2871 https://github.com/mozilla-mobile/fenix/issues/2871
  - 4y ago

karaterobot 4y ago

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. 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.

userbinator 4y ago

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. I've had a "replace sticky with relative" filter in my MITM proxy since the day that CSS misfeature showed up in browsers.

retcore 4y ago
I'm convinced that position:sticky wouldn't exist if browsers weren't beholden to advertising traffic. Someone needs to create a rival foundation to Mozilla, with some advertising and transaction processing chops, figure out how to sustain enough revenue to tax deduct enough smart promotion, and ideally, I'd personally wish, fork Pale Moon. The German Zugabeverordnung law was very strict against any "free" commercial offer tied to the obscuring of linked purchases. But instead of being extended to embrace the creation of sponsored funnels providing free entertainment websites, as is probably now long forgotten but fallacious doctrine, the internet instead made "free", "free". https://marketinglaw.osborneclarke.com/marketing-techniques/germany-finally-scraps-1930s-law/ https://marketinglaw.osborneclarke.com/marketing-techniques/... https://competition-attorneys.de/lawyer/zugabeverordnung-german-ordinance-on-bonuses/ https://competition-attorneys.de/lawyer/zugabeverordnung-ger... The law was scrapped in 2004, unlikely [ed] not [/ed] coincidentally with establishing peak web commercial libertarian lobbying, the more political and in earnest post dotbomb.
deergomoo 4y ago
position: sticky; makes tons of sense for web apps. It’s very common to want toolbars or menus always visible. I don’t think anyone in their right mind would claim that, for example, MS Word would be better if you needed to scroll to the top of the document to see any of the controls.
- userbinator 4y ago
  I don’t think anyone in their right mind would claim that, for example, MS Word would be better if you needed to scroll to the top of the document to see any of the controls. That's position:fixed or perhaps position:absolute, not position:sticky. And honestly, the former two are far less annoying to experience because they're there from the beginning, while the latter trick you into thinking they can be scrolled out of sight, but don't.

Night_Thastus 4y ago

Fantastic. Making the web a less awful place, one workaround at a time. You've got my bookmark. Now, make an auto-detect for this and stick it into something like uBlockOrigin and we're golden. :)

alphabet9000 4y ago

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.

bsimpson 4y ago

It's wild that you have to set up Docker to contribute to 600 characters of JavaScript. It's like building a robot to pass the butter.

krick 4y ago
You don't really have to. It's just minification and stuff, just a build step, I suppose the owner could do that as well, if your contribution has any value, but you didn't do it properly. Do you know a better way to build/minify js? Perhaps you have all these npm packages installed on your PC already? I don't, and I don't want to. If Dockerfile wasn't included I'd have to make my own just to run any fucking build-tools it requires to make a bookmarklet (which I most likely wouldn't bother to do). And, yeah, it requires them, this is not some optional stuff that author did just to be fancy. You could set up some CI to make automatic builds after merging to master, but that still wouldn't solve the problem of contributor wanting to test what he wrote.
- bsimpson 4y ago
  I've never used Docker (nor make). From the outside, it feels like some heavy VM thing for building isolated systems in the cloud. It's not something I'm used to seeing in the client-side ecosystem. I just took a second look at the repo, and realized there's no package.json. Typically, an open-source JavaScript project would have one. It would enumerate the dependencies and how they work together to generate the final output. As a JavaScript contributor, I expect to be able to type yarn yarn run build into any repo to generate the output (and test any changes I've made). I suspect the interactive web is not the author's primary platform. That's fine - it's his project; he can structure it however he wants. I was just surprised to see an unfamiliar, nontrivial dependency to concatenate a handful of lines into a bookmarklet. Since you asked "Do you know a better way?" you can port the `npm install` line to a dictionary of dependencies in package.json. You can use wireit in that same file to chain the CLIs together, accomplishing what's currently the ENTRYPOINT line in Dockerfile. It does the same thing that the current setup does, but it follows the conventions of the ecosystem. This makes it more available to external contributors, because they don't have to learn/install tools like Docker that aren't typically seen in JS.

vlunkr 4y ago

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.

_V_ 4y ago

Honestly I have uBlock set in a way that blocks most of this stuff by default. I have several "steps" of permissivity: 1) (default) block all JS completely 2) Block 3rd party js 3) Permit all js (rare) 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. 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. 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). 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

zagrebian 4y ago
Why are you waiting to switch to Firefox?
DavideNL 4y ago
Yea, it's amazing how much faster everything is when blocking 3rd party javascript with uBlock Origin by default. I expected many websites would stop working, surprisingly though many sites work times, and i simply: - hit my shortcut to set uBlock Origin to "relax" mode whenever needed - exclude a few CDN's - use a different browser (in private mode) for shopping and such
mgaunard 4y ago
Limited data plans? Do you live in the past?
- Saris 4y ago
  Every cell provider in the US still has them.

sorenjan 4y ago

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.

tempodox 4y ago

I find this very useful. 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: cat 'kill-sticky.js' \ | tr -s '\011\012\015\040' '\040' \ | node -e 'console.log(`javascript:${encodeURIComponent(fs.readFileSync(process.stdin.fd).toString())}`)' Insert the output as your bookmarklet's URL.

Yizahi 4y ago

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.

sf_rob 4y ago

Is there a purpose built bookmarklet searchable repository anywhere like there are for extensions/addons?