[HN Gopher] Kill-sticky, a bookmarklet to remove sticky elements... ___________________________________________________________________ Kill-sticky, a bookmarklet to remove sticky elements and restore scrolling Author : ivank Score : 197 points Date : 2022-09-27 17:05 UTC (5 hours ago) (HTM) web link (github.com) (TXT) w3m dump (github.com) | bauble wrote: | I used that for a while, but I was using it so often that I | installed 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. | cercatrova wrote: | 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 wrote: | replace `position: sticky` with `position: relative` | dekatron wrote: | 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.i | ncludes(getComputedStyle(node).position))%20%20%7Bnode.style%5B | 'position'%5D%20%3D%20'static'%3B%7D%7D)%3Bdocument.querySelect | orAll('html%20*').forEach(function(node)%20%7Bvar%20s%20%3D%20g | etComputedStyle(node)%3Bif%20('hidden'%20%3D%3D%3D%20s%5B'overf | low'%5D)%20%7B%20node.style%5B'overflow'%5D%20%3D%20'visible'%3 | B%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%20htmlNo | de%20%3D%20document.querySelector('html')%3BhtmlNode.style%5B'o | verflow'%5D%20%3D%20'visible'%3BhtmlNode.style%5B'overflow-x'%5 | D%20%3D%20'visible'%3BhtmlNode.style%5B'overflow-y'%5D%20%3D%20 | 'visible'%7D)() | Avery3R wrote: | There's static ding that'll make turn the sticky/floating | elements into normal ones | | 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. | aendruk wrote: | 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 wrote: | > 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. | _V_ wrote: | 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 | acabal wrote: | 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. | krick wrote: | Thanks for the keyword tip, IDK why I never used it. | jakzurr wrote: | Same. Showed my sister, and we've both been using for about a | year. Works more often than not. (OMG what a relief.) | autoexec wrote: | 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 wrote: | uBlock Origin includes an "element picker" which allows | blocking elements (permanently), this almost eliminates the | need for Nuke Anything. | autoexec wrote: | 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!" | nocman wrote: | Except for elements that change enough between page loads | that it can't recognize them as the same content (which | happens far too often). | ARandomerDude wrote: | 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 wrote: | 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 wrote: | This web site | bsimpson wrote: | 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 wrote: | 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 wrote: | 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. | flatiron wrote: | https://github.com/t-mart/kill- | sticky/blob/master/Dockerfile | | I'm reality it's just using node. But removed the | requirement to set node up. | bsimpson wrote: | Switched the requirement to setting Docker up. | | Just depends on what you expect your contributors to be | more familiar/comfortable/ready for. For most JS | projects, package.json is the expected onramp for new | contributors. We all have node installed. | szhu wrote: | Similar thing I made recently, but as a Chrome extension: | | 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 wrote: | You override window.addEventListener? At that point I think you | may as well just use nojs | curlftpfs wrote: | > 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 | Night_Thastus wrote: | 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. :) | [deleted] | sillysaurusx wrote: | 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." | joosters wrote: | 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. | aaaaaaaaaaab wrote: | Via Shortcuts: https://imgur.com/a/FRy12rp | happyopossum wrote: | I've been using this bookmarklet on mobile safari for 3-4 | years... | | _edit - just looked up the DF post I found out about it from, | and it's been 5.something years_ | | [0] https://daringfireball.net/linked/2017/06/27/mcdiarmid- | stick... | tobr wrote: | 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 wrote: | > Bookmarklets work fine on iOS Safari | | Does the bookmarklet get executed for the current open tab? | happyopossum wrote: | Yup | happyopossum wrote: | It's a bit easier to set it up on desktop safari and let | iCloud sync it over for you... | marcodiego wrote: | I have this addon: https://addons.mozilla.org/en- | US/firefox/addon/kill-sticky/ installed on Firefox. Use it more | than I'd like. | fisherjeff wrote: | 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 wrote: | mine kept growing every time I stumbled on a page with new | hostile sticky situation: | | javascript:(function(){void([].forEach.call(document.querySelec | torAll('body *'),e=>/fixed|sticky/.test(getComputedStyle(e).pos | ition)&&e.parentNode.removeChild(e)));document.body.style = | 'overflow:auto !important; height:100% !important;';document.bo | dy.removeAttribute("class");document.firstElementChild.removeAt | tribute("style");document.firstElementChild.removeAttribute("cl | ass")})() | sp332 wrote: | Is there something that will prevent Medium pages from scrolling | to the top when you reload the page? | alphabet9000 wrote: | 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. | karaterobot wrote: | 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. | ryanianian wrote: | 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? | farisjarrah wrote: | You can add this on iphone by adding another webpage as a | bookmark using the share menu in safari and then going back and | editing the bookmark so its what you want it to be. | aaaaaaaaaaab wrote: | 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... | aendruk wrote: | 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. | kevin_thibedeau wrote: | At least you'll be safe from the blipverts. | postalrat wrote: | Why a canvas with webassembly? Just a single video element | with everything rendered on the server gives them the most | control. | aaaaaaaaaaab wrote: | 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 wrote: | There's a motion to add first class support for in-page popups. | Ironically that could take us back to the good old days of | having a consistent target to block. | | https://news.ycombinator.com/item?id=32599583 | axiolite wrote: | 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-el... | | 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-extensio... | coronasaurus wrote: | 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. | vlunkr wrote: | 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. | userbinator wrote: | 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 wrote: | 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/... | | 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 wrote: | 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. | vmoore wrote: | You could pass this code into Tampermonkey/Violentmonkey[0] and | use it globally on every domain. | | [0] https://violentmonkey.github.io/ | ryandrake wrote: | 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. | userbinator wrote: | I use JS whitelisting but haven't gotten to the point of CSS | off by default yet; I suppose on the majority of sites I come | across, the CSS hasn't been bad enough to warrant it. | nnmg wrote: | You're not alone, I use noscript on firefox for exactly that. | It makes some websites unusable, but for normal browsing, | that's what I use. If the website is unusable after allowing a | few scripts, then I don't want to be there. It is horrifying | when you see how much JS some websites try to pull in. | zajio1am wrote: | I am already doing that (with NoScript), since browsers started | supporting video, but not supporting reliable way to stop | autoplay. | | OTOH, i see why things like adblocking is extension. That makes | browser neutral with regard to content, while different plugins | can bring different policies. | kevin_thibedeau wrote: | Firefox has about:config settings to disable autoplay. | musicale wrote: | > video, but not supporting reliable way to stop autoplay | | It's an almost incredible situation. Firefox and Safari have | a setting to stop autoplay, but much of the time it doesn't | actually work, and Chrome doesn't even seem to have a | setting. | | It's also amazing how when enough users decide that they hate | some obnoxious web site behavior (pop-up windows, autoplaying | video, etc.) enough to block it, the web site designer's | response isn't "maybe we should be less obnoxious" but "how | can we circumvent the user's preferences?" | permo-w wrote: | user not customer | mrguyorama wrote: | Firefox has never failed to stop autoplay for me. I don't | have it set to stop all autoplay, because I watch an extreme | amount of Youtube, but any tab that opens in the background | or isn't focused has never failed to "Autoplay Blocked" | marginalia_nu wrote: | Might wanna check out the gemini protocol[1]. Although while | it's a nice place to visit, it I think it takes it a bit too | far in the other direction. | | [1] https://gemini.circumlunar.space/ | dopidopHN wrote: | Yeah I thought of those guys while reading this comment | section. | | Gemini site and hubs do have a didactic to flavor; not that | different from the old web. | | Except the old web was yearning for more bell and whistle. | Dynamic element. Gemini made anything not text illegal | coldpie wrote: | Just use NoScript. It's designed for exactly that, and it's | great. Permanently allowlist the sites you use frequently, | temporarily allowlist stuff as needed until the site starts | working. It sucks, but leagues it's better than the unfiltered | web. | permo-w wrote: | slightly unrelated, but what I would really like would be the | ability to block google's cookies on every website except | google. I do not want them tracking me across the web, but they | make their site unusable if you block cookies. I tried using | different search engines, but was less than impressed by any of | them | hrbf wrote: | 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 wrote: | Developers: I would pay for a firefox or chrome extension | that lets you just toggle the whole browsing session or tab | into reader mode | rpgbr wrote: | I'm not sure about Firefox, but Safari let's you set reader | mode as default for a domain -- and since Safari 16, this | setting is synced to all your devices. | masukomi wrote: | I've regularly wished for a browser that was "reader mode" | by default, and had a button for "unreadable mode" | permo-w wrote: | 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 | spicybright wrote: | 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. | peanut_worm wrote: | Seems kind of pointless. Browsers are basically just virtual | machines that run web applications at this point. I can't even | think of any plain text and image websites besides my own. | dotancohen wrote: | > I can't even think of any plain text and > image | websites besides my own. | | Ycombinator has a great news aggregation website that is text | only. You can find a link to it from the top of this page. | marginalia_nu wrote: | There are plenty, you're using the wrong navigational tools | ;-) | sefrost wrote: | Hacker News? | krick wrote: | Exactly. I never understood all these "I don't enable js" | comments. You kinda usually don't need to disable js on sites | that are _usable_ without js. And if you feel the urge to | disable it, it is most likely that without js it 's an empty | page anyway. | joosters wrote: | 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 wrote: | 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. | Kerrick wrote: | 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 | darepublic wrote: | For some ui, fixed sidebar is fine imo. The headers that | scroll down with you, on the other hand, can go extinct | ravenstine wrote: | One of the banes of my existence! There's no place for these | stupid effing banners when browsers have inertia scrolling and | infinite-scrolling sites have fixed headers (or footers) | visible all the time. Maybe I wouldn't be so frustrated if the | tolerance for what makes a header reappear wasn't ~3px, which | is what I often perceive it to be. It totally misunderstands | human behavior, which isn't to read an article word by word all | the way through like a robot but to reread things to better | comprehend them and jump around an article to make sense of | connected ideas. ___________________________________________________________________ (page generated 2022-09-27 23:00 UTC)