10 ms·
Kill sticky headers (2013)
- agumonkey 9y agoHeh, walking the dom to evict these kind of elements is a pleasure of mine. I have too bookmarklets very similar. Makes for a nice tree recursion thinking exercise at first. ps: yes sticky is subtle and nowadays it's often wasting space.
- notadoc 9y agoI don't really mind the slim ones on desktop, but they seem to be trendier than ever and particularly annoying on mobile.
- apk-d 9y agoWhat drives me mad on mobile is the headers that expand/collapse depending on whether you're scrolling up or down, except without any hysteresis which makes them randomly activate as I scroll down. This, combined with the additional lag caused by JavaScript, occasionally makes me ragequit from reading an article. I don't know whether this is just my device (mid-end Xiaomi) or a complete lack of usability testing.
- mort96 9y agoA lot of stuff works amazingly well when you're on the same wifi network as the development server and use a top of the line iPhone 7. I assume most "usability testing" from such websites are done like that.
- digi_owl 9y agoUntil some bozo forgot that not everything is 16:9, and the "slim" header linebreaks into a double height version...
- awinter-py 9y agoanything that hijacks ordinary scrolling behavior is going to ruin the experience for most users. More and more web pages have found some way to break page down -- either by initially stealing focus or by making scroll completely JS-based. Sticky headers make pgup/pgdn worse by make the visible size of the page smaller than the window size, so you lose a line or two and have to rewind. The ones that reappear when you scroll up are even worse. Even worse, when you click to an anchor section on a sticky-header page, the title of the section is hidden by the sticky header. Take me back to the static web.
- Andrex 9y agoNYT actually takes the page-down/lines of text problem into account. Odd that others haven't copied. Now that both position: sticky and Scroll Snap Points from CSS are landing in browsers, those complaints will hopefully be resolved. Scrolling is much better off left in the hands of CSS than JS.
- steve-howard 9y agoNYT is pretty obnoxious in other ways, though, especially with a touchscreen. If you click and drag to highlight something, it navigates to a different article. If you double-click to select a word, it changes the text size. If you accidentally hit the left or right arrow key while trying to scroll up or down, it again tries to load the next article.
- dredmorbius 9y agoAnd it's not possible to select text at all on Mobile. I've taken to using alternative links (archive.is, archive.org, outline.com) for sharing the articles simply because it's too much of a PITA to manage the NYTimes.com page itself.
- awinter-py 9y agonytimes.com also hijacks the left/right arrow to advance to the next article, and used to do a thing where if you multi-click to select a paragraph it would jiggle the font size.
- abrowne 9y agoFirefox takes full-width fixed headers (and footers?) into account when you scroll with page up/down or space bar.
- JoshTriplett 9y ago> Even worse, when you click to an anchor section on a sticky-header page, the title of the section is hidden by the sticky header. This, especially. If the browser were somehow informed about the header in a semantic way, it could avoid this.
- err4nt 9y agoWell this blog post is _really_ shortsighted for a couple reasons: 1. There's position: sticky; recently added to CSS: https://drafts.csswg.org/css-position/#sticky-pos https://drafts.csswg.org/css-position/#sticky-pos 2. Position: sticky; is gaining browser support fast: http://caniuse.com/#feat=css-sticky http://caniuse.com/#feat=css-sticky So what I draw from that are the following insights: 3. The author of the bookmarklet should update the code to also check for elements now using position: sticky; 4. Sticky elements haven't peaked on the web, the deluge is _about_ to begin actually. Brace yourselves…
- coldtea 9y ago(3) That doesn't make the blog post "shortsighted", just missing a new trick, that's not much used yet anyway. (4) The websites that wanted to have a sticky header would have done it already with one of the several available current methods. The appearance of an easier way to do it with a single CSS rule is not gonna increase their number drastically.
- shmolyneaux 9y agoThis article was written in 2013, almost 3 years before any browser supported "position: sticky". I disagree that the blog is shortsighted, but as you mentioned, the bookmarklet should be updated.
- ncallaway 9y agoThe blog post was written in 2013.
- sean2 9y agoDoes this little update to the bookmarklet solve the issue? I'm not a webdev, feel free to fix it. (function () { var i, elements = document.querySelectorAll('body *'); for (i = 0; i < elements.length; i++) { if (getComputedStyle(elements[i]).position === 'fixed') { elements[i].parentNode.removeChild(elements[i]); } // 2017 update: if (getComputedStyle(elements[i]).position === 'sticky') { elements[i].parentNode.removeChild(elements[i]); } } })();
- 9y ago
- ballenf 9y agoMy gripe is the disappearing header that reappears at the slightest twitch of reverse scrolling. The behavior needs to work more like drag down to refresh: only reappear with a deliberate and significant scroll "up" (a drag down with the finger) or just stay at the very top where it belongs (it only takes one tap on mobile to get back there). With most of them if you need to backtrack and read a few lines up, you have to scroll well past the point or the exact text you want to read gets covered by the header.
- sillysaurus3 9y agoOr the behavior should, y'know, go away entirely. It's the bane of everyone who uses the top edge of the viewport to help them read.
- weaksauce 9y agoI agree... I always move the current line to the top of the page for some reason. that's actually why I don't like most ebook readers because they are paginated.
- ed312 9y agoI suspect the pagination is more about saving battery (only need to re-render once per page) vs a smooth scrolling experience.
- deleted 9y ago[deleted]
- cm2012 9y agoI've done a lot of conversion optimization in my career. Persistent headers are one of the most reliably successful tests, at least for B2B sites. That said, everyone is welcome to use plugins to see the web the way they want to!
- austenallred 9y ago> The bookmarklet just finds all fixed-position elements on the page, and removes them. That will do quite a lot more than remove sticky headers.
- robbrown451 9y agoTrue, but remember this is a bookmarklet, not an extension. So you use it on a site that is actively annoying you. If it breaks the site, you can refresh.
- sillysaurus3 9y agoI'm not sure what you mean, but I've used Kill Sticky every day for the past year or two and it's worked flawlessly. Any time I have any crap following my viewport around, it gets rid of it.
- throwaway91111 9y agoYea, but in the context of reading an article it rarely matters.
- draw_down 9y agoI'm sympathetic, but forcing style calculation for every element on the page may not be the most performant solution.
- ncallaway 9y agoIt doesn't need to be. It's a bookmarklet. You click it when there's a sticky header. If it takes 200ms to run, that's not a problem. If it were a browser extension running on every page, sure, that's a disaster.
- vortico 9y agoThanks for this!! It's unbelievable how OCD I am about this particular detail. It feels like I'm physically constricted as I scroll through a webpage. The other gripe is a webpage taking up 100% of the width of the page. I feel like everything should have at least a small border so I know I'm not missing content outside the width of the page.
- such_a_casual 9y agoHonestly, this is an issue with having absolutely terrible browsers. This sort of thing should be easy to do without having to know javascript. The user just has so little power with the user interface they're given for interacting with the internet. Obviously, this will change over time, but the transition period is very frustrating.
- tim333 9y agoA trouble is it's a moving target. As soon as you sort one annoyance they'll invent a new one. That said Chrome could really do with a simple do not autoplay video setting.
- hello_there 9y ago> do not autoplay video setting. Not to mention sound.
- Doxin 9y agoAt least they added the feature to mute a tab. No more hunting for that one ad that's making sounds.
- awkward 9y agoAMP is a horrific web standards breaking power grab but if there's one thing that's going to kill it it's that google can't help but put a dang sticky header at the top of every page.
- throwaway91111 9y agoDrives me nuts. That's why there's a back button built in to the browser
- tim333 9y agoGreat minds think alike - I also have an 11' macbook and got annoyed enough to make a chrome extension https://chrome.google.com/webstore/detail/zapfixed/jgiflpbkoefoepgmeifoglafkomgjbge?hl=en https://chrome.google.com/webstore/detail/zapfixed/jgiflpbko... I think his one may be better. Mine toggles using jquery.
- wybiral 9y ago> Finally, I just don't care right now about navigating your website, or following you on Twitter. I'm trying to read. Let me focus on that for now, please. Agreed. Those sticky headers almost always wind up on sites like blogs and text articles where they have no place and just reduce usability.
- vesrah 9y agoThe problem is that they convert, so they are going to keep being used.
- ravenstine 9y agoCitation? I ask this because data at my company has shown that virtually nobody taps on the header, especially on hamburger menus.
- vesrah 9y agoGuess my citation is also anecdotal, we have a series of extremely high converting sites in the rehab market that drive calls from the sticky header.
- Breefield 9y agoIs this being reposted as satire? Mcdiarmid.org has a sticky header on mobile in 2017...
- Navarr 9y agoAfaik, only this one article uses a sticky header - and only then it seems to be to show off the bookmarklet
- contravariant 9y agoThat one is probably there for illustrative purposes.
- hyder_m29 9y agoI think it's so you can test the bookmarklet
- bushin 9y agogetComputedStyle = undefined Don't visit websites you don't like. That's the only way.
- gkya 9y agoI passionately hate my uni's automation website, it's a great example of haphazard overkill, but I need to choose my lessons each semester. What should I do, switch schools?
- doodpants 9y agoSo simple, yet so useful! How have I not found this before? It even kills the annoying "Log In/Sign Up" pop-up dialog on facebook pages!
- rwallace 9y agoI'd love to have such a feature, but this doesn't work for me. On Chrome, it's in my bookmark bar but it has no effect. On Firefox, it doesn't allow dragging to the bookmark sidebar. (I actually don't see how it could possibly work - how could something sitting in the bookmark bar have such an effect? But I'm happy to grant the possibility there are things I don't know about how browsers work.) What am I missing?
- steve-howard 9y agoYou have to click it to make it do anything. It's a bookmarklet.
- acqq 9y agoHere's the introduction: https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks https://support.mozilla.org/en-US/kb/bookmarklets-perform-co... When you properly install it, instead of the link, there should be an executable code in the bookmark (if it starts with http: or something, it isn't). To activate the code, first you visit the page on which you want the code to work, then you click at the bookmarklet.
- rwallace 9y agoAh! That works, thanks!
- SippinLean 9y agoCombine this with the recent surge of sticky footers as well, especially on small/mobile devices. Vice is a particularly bad offender: http://i.imgur.com/ltqYRX9.png http://i.imgur.com/ltqYRX9.png That's a 60px sticky header + a 50px sticky footer on a 480px-tall screen. 23% of my screen space is lost to sticky elements. The footer is only two buttons, "Share" and "Tweet". Every time you scroll down, the header slides up, and then back down again. It's an incredibly distracting experience. The icing on the cake is the ad in the middle of the article, it's in an iframe that hijacks your scrolling, until you swipe through all 5 slides you cannot continue scrolling through the article. Why would I ever subject myself to consuming content this way?!
- epistasis 9y agoI just leave those sites immediately. It's too infuriating.
- feld 9y agoReader view on iOS Safari makes the web usable on mobile.
- Qub3d 9y agoFor my fellow Android users out there, Firefox also has a reader mode.
- abrowne 9y agoFor me, it's more like "reading mode on Firefox makes the web usable" on all devices.
- dredmorbius 9y agohttps://outline.com https://outline.com if reader mode not available -- works in pretty much any (JS-supporting) browser. A small set of sites fail to render, including Google's Blogspot, using dynamic themes, which are abominations to the Web. No "fix this site's fucked CSS / styling" tools seem to be able to handle that.
- onlinemantas 9y agoBut… I like them. It makes navigating easier. I’m talking about just the nav bar though—like the one here on HN.
- azdavis 9y agoRight. But the nav bar on HN isn't sticky.
- ratsmack 9y agoSticky headers ave their place, but they should be minimal and supply links to other locations on the site. They should never be used for advertising.
- yourduskquibble 9y agoFinally I see something posted about this. If any of you are interested, I have been maintaining a filterlist that works for uBlock origin that attempts to pin (so they won't move when you scroll down) these sticky headers to the top and remove additional screen real estate hijacking web elements. It may be a losing battle but I update the list almost daily with all new instances of this web plague that I come across. It also works on Firefox Mobile for Android if you have uBlock Origin installed there. If you'd like to subscribe, enter the following link[1] into your 3rd party filters menu within uBlock Origin - just paste it into the 'Custom' URL entry at the bottom of the '3rd party filters' menu option. The project homepage is at: https://github.com/yourduskquibbles/webannoyances https://github.com/yourduskquibbles/webannoyances Cheers! [1] https://raw.githubusercontent.com/yourduskquibbles/webannoyances/master/ultralist.txt https://raw.githubusercontent.com/yourduskquibbles/webannoya...
- cellularmitosis 9y agoThanks so much for working on this!
- terwanerik 9y agoWhy not set the position to absolute instead of completely removing the element. The solution to losing the navigation is reloading the page, seems unnecessary.
- blue_skies 9y agoSticky headers bother me especially when trying to read news sites on a laptop. Similar bookmarklets I have found helpful are "static ding" and "static nuke" (staticding.org). Static Ding just changes "fixed" DOM elements to "relative". They remain in the DOM and visible but they can scroll off screen. I use that to read (for example) New York Times op eds because a NY Times' link to view comments is on the sticky header itself. If I don't need continued access to a sticky header, I use Static Nuke, which sets "fixed" DOM elements to "display: none", similar to the posted bookmarklet which removes them from the DOM.
- accountyaccount 9y agoA lot of blanket statements in here, but there are sites out there that have tested them and found sticky headers useful in some way. We're not the only demographic. I personally don't like them either, but I also know how to scroll. I've seen instances on long pages where there are audiences who have a hard time navigating through a lot of content without a constant point of reference.
- asmosoinio 9y agoOh cool, the bookmarklet also works on medium.com to remote the utterly annoying bottom bar. Bookmarked and will be used. With a 15" laptop screen the medium.com "Never miss a story from ..., when you sign up for Medium."-bar takes up like 10% of vertical space.
- pleasecalllater 9y agoAnd one day someone will invent sticky body. Oh, wait, it is called flash :)
- iwalton3 9y agoYou can use this userscript [1] to hide most floating headers when you scroll down the page. (When you scroll up, the header is displayed again, so the site doesn't become unusable.) [1] https://iwalton.com/wiki/#NoFixed https://iwalton.com/wiki/#NoFixed
- king_phil 9y agoNobody mentioned the yellow sticky header on the "kill sticky headers" page...?
- eat_veggies 9y agoIt's to help you test out the script on the page
- Steko 9y ago1Blocker recently added a 'tap to remove elements' feature.
- deepsun 9y ago> I use an 11" MacBook Air, which means that I don't have much vertical screen space. Maybe that's the problem? I use 27+ inches monitors at home and office, and never had any issues with sticky headers. Leave them alone! :)
- effingwewt 9y agoYour answer to a problem no one should be forced to deal with is to spend more money on a bigger monitor? Not only does that not address the issue in the slightest, but that's very much like saying if you don't like the banner ads run across the bottoms of t.v. shows you should buy a bigger t.v. so it feels smaller.
- nv-vn 9y agoReddit is even worse with their sticky footer that takes up 50% of the screen. It tells you to install their official app (which is by far the worst Reddit app I've found on Android) to continue. However the footer shows a big orange "Continue" button (implies that you continue through the site, the heading above this saying it will install the app is much less visible than the button's text). Below this, in tiny grey text, it says "Or go to the mobile site" (implying it will redirect to the website, which is in fact the opposite of what actually happens). This is blatantly attempting to confuse users and every time I end up on the reddit site in a mobile browser it revives my hatred for reddit: the company.
- flukus 9y agoIs the reddit app even an a real app? It feels like they just packaged their equally awful mobile site. It's really amazing that they can mess things up so badly when there are multiple apps that already do the same thing much better.
- mercer 9y agoIt's even worse than that. Alien Blue was by far the best Reddit client I've used. They bought it and for some reason then went on to build the worst Reddit client I've used. Quite a shame because even though I've found other apps that do a good job, I still miss Alien Blue. Anyone know why they'd do this?
- a_e_k 9y agoThis is why I append .compact to the desktop URL to browse with their older mobile version. I find it much more usable.
- Sir_Substance 9y agoYou're my hero
- hoosieree 9y ago
- dredmorbius 9y agoIs there a way for bookmarklets such as this to work in a mobile browser? I find that they don't, because I don't have a bookmarks bar I can add the bookmarklet to. It does, however, work within the demo page itself.
- anonred 9y agoIn iOS it would require a Safari action extension that lets you load arbitrary JS. In Android I’m sure there’s a bunch of apps that do something along those lines. Edit (no affiliation): Safari Snippets by ydangle https://appsto.re/us/biIhdb.i https://appsto.re/us/biIhdb.i
- digi_owl 9y agoI must say I dislike just as much the very similar trend with mobile apps to save a few lines of screen space, particularly with mobile web browsers.
- cdevs 9y agoReminds me of a bookmark I made for work to override a JavaScript function that clears a form. So test input on our live site will stay in a form and we can stop typing it in over and over. the nice thing about the web is being able to manipulate the front.
- l1n 9y agoIn Firefox you you can go to about:config and set layout.css.sticky.enabled to "false", which is helpful.