TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

A bookmarklet to kill sticky headers (2013)

219 点作者 clockworksoul4 个月前

26 条评论

ashtonmeuser4 个月前
Bookmarklet aficionado and maintainer of bookmarkl.ink here. Took the liberty of posting this bookmarklet: <a href="https:&#x2F;&#x2F;bookmarkl.ink&#x2F;ashtonmeuser&#x2F;849a972686e1505093c6d4fc5c6e0b1a" rel="nofollow">https:&#x2F;&#x2F;bookmarkl.ink&#x2F;ashtonmeuser&#x2F;849a972686e1505093c6d4fc5...</a>
评论 #42903604 未加载
评论 #42904679 未加载
评论 #42908443 未加载
评论 #42908718 未加载
评论 #42903452 未加载
crazygringo4 个月前
I&#x27;ve been using the Kill-Sticky Chrome extension for years:<p><a href="https:&#x2F;&#x2F;chromewebstore.google.com&#x2F;detail&#x2F;kill-sticky&#x2F;lekjlgffkaencjnlcmbgibodhechofdb?hl=en" rel="nofollow">https:&#x2F;&#x2F;chromewebstore.google.com&#x2F;detail&#x2F;kill-sticky&#x2F;lekjlgf...</a><p>Because it has a configurable keyboard shortcut.<p>Can&#x27;t imagine browsing the web without it. At this point hitting Cmd+K when I visit an article is pure reflex.<p>A bookmarklet would be more secure, but I don&#x27;t know of a way to assign keyboard shortcuts to one.
评论 #42904851 未加载
评论 #42908080 未加载
评论 #42910607 未加载
bschne4 个月前
Anecdote: I was in charge of a complete rebuild for an e-commerce website a few years back, which included a new design. We were debating various layout options, as it was tricky to get the information hierarchy right and show everything necessary even on smaller screens. Then we had an internal review and the CEO complicated things considerably by insisting it was very important that the header be sticky --- to ensure that the company logo would always remain visible even when scrolling, reminding users of our brand.
评论 #42905011 未加载
评论 #42904255 未加载
评论 #42909574 未加载
quantadev4 个月前
The whole entire internet is broken.<p>Specifically what I mean is HTML is flawed. It should never have been a presentation format. It should&#x27;ve always been a DATA format, like JSON, or XML, from day one. The browser itself would then be able to display information (pages) in whatever style, colors, and format it wants.<p>Probably 99.999% of developers agree with this, but we&#x27;re stuck in a RUT it seems. I know what I&#x27;m sort of talking about is the &quot;Semantic Web&quot;, and I&#x27;m probably preaching to the choir to bring it up on Hacker News.<p>But I&#x27;m wondering if it&#x27;s possible to change? What would it take? We&#x27;d need some major movement, almost like Web3, or Blockchains, that got everyone to wake up and realize there&#x27;s an easier way. We&#x27;re stuck because there&#x27;s no real incentive for change. It&#x27;s a chicken and egg problem. No one is gonna be first to design something, unless everyone else is already using it. :( Thanks for listening. That was step one I guess.
评论 #42908648 未加载
评论 #42909683 未加载
nfriedly4 个月前
I&#x27;m using the Bar Breaker Firefox Extension[1], it&#x27;s particularly helpful on Android devices with smaller screens.<p>It completely gets rid of the bars, which is sometimes great, but sometimes too much. I occasionally have to turn it off for workflows where the &quot;next&quot; button is in a fixed bar, such as checkout for US Mobile, or saving a Yoto playlist.<p>[1]: <a href="https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;bar-breaker&#x2F;" rel="nofollow">https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;bar-breaker&#x2F;</a>
layer84 个月前
&gt; There&#x27;s even a sticky header web startup.<p>That’s hilarious (and sad). It seems to be still in business, since 2012.
评论 #42902907 未加载
评论 #42904534 未加载
DaveSwift4 个月前
Love it! Since it&#x27;s now 2025, we probably should search for &quot;fixed&quot; &amp; &quot;sticky&quot;<p>Here&#x27;s a minified version with &quot;sticky&quot; added:<p>javascript:(()=&gt;[...document.querySelectorAll(&#x27;body *&#x27;)].map(el=&gt;[&quot;fixed&quot;,&quot;sticky&quot;].includes(getComputedStyle(el).position)&amp;&amp;el.remove()))();
评论 #42910237 未加载
评论 #42906694 未加载
lasarkolja4 个月前
Dont hate me, but I would like to have the opposite functionality<p>Just for mobile, where it is very annoying on long pages (Laravel Docs for example) to scroll up just to get the menue button.
评论 #42904995 未加载
评论 #42908791 未加载
评论 #42906625 未加载
chrsw4 个月前
These things are so annoying. Is there a website benchmark not for speed, not for security but for &quot;annoyingness&quot;? I guess there is some overlap with accessibility, but that&#x27;s not exactly what I&#x27;m thinking of.<p>I asked Copilot and searched Google but couldn&#x27;t really come up with anything.
评论 #42903669 未加载
评论 #42904472 未加载
shiomiru4 个月前
In my text browser I came up with a way to implement these that doesn&#x27;t move boxes around the page.[0] In short: treat &quot;position: fixed&quot; as an absolute child of the root box, and ignore &quot;position: sticky&quot; (mostly).<p>This doesn&#x27;t completely eliminate sticky headers&#x2F;footers (problematic when you actually want to use them), but they behave like normal elements at the start&#x2F;end of the <i>page</i> (instead of the screen).<p>I initially did it this way for technical reasons, but now I kind of prefer it to what mainstream browsers do.<p>[0]: <a href="https:&#x2F;&#x2F;git.sr.ht&#x2F;~bptato&#x2F;chawan&#x2F;tree&#x2F;e56399f92d2323f9af95e001f86bd88798ccab2b&#x2F;item&#x2F;doc&#x2F;css.md#codeposition-fixedcode-codeposition-stickycode" rel="nofollow">https:&#x2F;&#x2F;git.sr.ht&#x2F;~bptato&#x2F;chawan&#x2F;tree&#x2F;e56399f92d2323f9af95e0...</a> (not a great explanation - it says &quot;bottom&quot;, but like &quot;position: absolute&quot; it&#x27;s placed at the top if only &quot;top&quot; is specified, etc.)
fatboy4 个月前
I have a (badly made) variant of kill sticky that I use on my phone. It kills sticky, then messes with any code blocks it finds to make them full width and use a smaller font.<p>It drives me mad when I&#x27;m reading articles with embedded code blocks where the code has less room than the prose and sometimes a bigger font!<p>It works well on eg this page (<a href="https:&#x2F;&#x2F;www.programiz.com&#x2F;swift-programming&#x2F;inheritance" rel="nofollow">https:&#x2F;&#x2F;www.programiz.com&#x2F;swift-programming&#x2F;inheritance</a>), but maybe someone that knows what they&#x27;re doing can make it work on GitHub. It&#x27;d be nice to not see those line numbers taking up half the width.<p>I&#x27;m on my phone so I&#x27;ve only the bookmarklet to hand:<p><pre><code> javascript:(function()%7Bvar%20i%3Bvar%20b%3Ddocument.querySelectorAll(%22body%20*%22)%3Bfor(i%3D0%3Bi%3Cb.length%3Bi%2B%2B)%7Bvar%20el%3Db%5Bi%5D%3Bif(getComputedStyle(el).position.match(%2Ffixed%7Csticky%2Fgi))%7Bel.parentNode.removeChild(el)%3B%7D%7Dconst%20c%3Ddocument.querySelectorAll(%22html%22)%3Bfor(i%3D0%3Bi%3Cc.length%3Bi%2B%2B)%7Bif(%22hidden%22%3D%3D%3DgetComputedStyle(c%5Bi%5D).overflow)%7Bc%5Bi%5D.style.setProperty(&#x27;overflow&#x27;%2C%22scroll%22%2C%22important%22)%3B%7D%7D%7D)()%3B(function()%7Bvar%20i%2Cj%2Cb%3Ddocument.querySelectorAll(%22pre%22)%3Bfunction%20setPropertiesOuter(el)%7Bel.style.setProperty(&#x27;margin-left&#x27;%2C%22calc(-50vw%20%2B%2050%25)%22%2C%22important%22)%3Bel.style.setProperty(&#x27;margin-right&#x27;%2C%22calc(-50vw%20%2B%2050%25)%22%2C%22important%22)%3Bel.style.setProperty(&#x27;font-size&#x27;%2C%2211px%22%2C%22important%22)%3Bel.style.setProperty(&#x27;text-indent&#x27;%2C%220%22%2C%22important%22)%3Bel.style.setProperty(&#x27;border-left-width&#x27;%2C%220%22%2C%22important%22)%3Bel.style.setProperty(&#x27;border-right-width&#x27;%2C%220%22%2C%22important%22)%3Bel.style.setProperty(&#x27;border-radius&#x27;%2C%220%22%2C%22important%22)%3Bel.style.setProperty(&#x27;padding&#x27;%2C%2210px%22%2C%22important%22)%3Bel.style.setProperty(&#x27;width&#x27;%2C%22100vw%22%2C%22important%22)%3Bel.style.setProperty(&#x27;max-width&#x27;%2C%22100vw%22%2C%22important%22)%3B%7Dfunction%20setPropertiesInner(el)%7Bel.style.setProperty(&#x27;font-size&#x27;%2C%2211px%22%2C%22important%22)%3Bel.style.setProperty(&#x27;text-indent&#x27;%2C%220%22%2C%22important%22)%7Dfor(i%3D0%3Bi%3Cb.length%3Bi%2B%2B)%7Bconst%20el%3Db%5Bi%5D%3BsetPropertiesOuter(el)%3Bvar%20descendants%3Del.querySelectorAll(%22*%22)%3Bfor(j%3D0%3Bj%3Cdescendants.length%3Bj%2B%2B)%7BsetPropertiesInner(descendants%5Bj%5D)%7D%7D%7D)()</code></pre>
lemonberry4 个月前
The only sticky headers I like are the ones that disappear while scrolling to the bottom of the page but reappear when scrolling back up. Preferably while scrolling up the user is only seeing the navigation and logo. Otherwise, they&#x27;re super annoying.
评论 #42905034 未加载
评论 #42903833 未加载
bloopernova4 个月前
Is there a way to get this working on Firefox Android?<p>The bluesky sticky header is annoying, and I haven&#x27;t seen a way to just switch it off.<p>EDIT: solved: drag kill sticky to bookmarks on desktop browser, then access bookmark from sync&#x27;d Firefox on Android.
评论 #42909889 未加载
evgpbfhnr4 个月前
If someone has one for the &quot;share this&quot; popups when you select some text in way too many articles&#x2F;blogs I&#x27;d love to add this to my collection...
codingrightnow4 个月前
He can&#x27;t hate them that much he put one on his website.
评论 #42902828 未加载
评论 #42903273 未加载
评论 #42902808 未加载
评论 #42902804 未加载
评论 #42902921 未加载
username2234 个月前
A &quot;kill-fixed&quot; bookmarklet that kills anything with position &quot;fixed&quot; or &quot;sticky&quot; is essential to making websites usable. The &quot;best&quot; is Substack, where I load the page with JavaScript disabled, then enable it to kill the red fixed-position bar telling me that JavaScript is essential.
ggasp4 个月前
Perfect little tool I’ve been using but I completely forgot.<p>I make it a Shortcut out of it: <a href="https:&#x2F;&#x2F;www.icloud.com&#x2F;shortcuts&#x2F;8aa788a3acc747169a6d80191a04f03a" rel="nofollow">https:&#x2F;&#x2F;www.icloud.com&#x2F;shortcuts&#x2F;8aa788a3acc747169a6d80191a0...</a>
tempodox4 个月前
Nowadays even more vital than 12 years ago. Things have not gotten better in the meantime.<p>I&#x27;ve been using the Kill Sticky bookmarklet for that:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;t-mart&#x2F;kill-sticky.git">https:&#x2F;&#x2F;github.com&#x2F;t-mart&#x2F;kill-sticky.git</a>
stevage4 个月前
So it works by removing elements with &quot;position: fixed&quot;.<p>But do all sticky headers work like that? In sites that I build, I tend to just have a normal div at the top, followed by a div for the main body with &quot;overflow-y: scroll&quot;.
评论 #42907774 未加载
SeanAnderson4 个月前
This article is about removing all fixed elements on a page. Not only do other elements catch strays, fixed isn&#x27;t the industry standard way of making sticky headers in 2025!
评论 #42905392 未加载
mrzool4 个月前
I still use this daily.
perching_aix4 个月前
the website has a massive, undismissing sticky header on top on mobile with js disabled. it&#x27;s also the useless kind. rather ironic.
评论 #42904902 未加载
zoom66284 个月前
Kill Sticky is brilliant. Been using for years.
bradgessler4 个月前
If only sticky headers didn’t convert so well!
评论 #42905382 未加载
zapkyeskrill4 个月前
2025 and it still works, even on mobile
fn-mote4 个月前
(2013) but I will give it a try.
评论 #42902768 未加载