Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Kill Sticky Headers (2013)

alisdair.mcdiarmid.org

Post reply on HN
Print view View original

21–30 of 84 posts

Re: Kill Sticky Headers (2013)

#21

Post by dylan604 »

vortico wrote: post #12

Sticky headers make me feel claustrophobic, I don't know why. Regardless of my screen height (it could be a 30" monitor), it feels like something is "stuck" to my browser that wasn't before and makes me feel anxious. Even without that feeling, sticky headers kill the feeling that I'm moving through a viewport of a webpage. It makes your website look like it's not of the "webpage" medium that I've been familiar with f…

Sticky headers just become part of the window to me. Like everything, some are better than others. Some are horrendous with flashing video/banners/etc. Some are useful so that the site navigation is always available regardless of page length. I personally hate having to scroll back to the top just to jump to the next section. This website is too hot, this one is too cold, this one is almost just right. Can't please 100% of the users, ever.

Re: Kill Sticky Headers (2013)

#23

Post by joegahona »

Sticky navigation on desktop that is appox the height of the Hacker News nav and does NOT include ads is fine with me. I loathe sites that have a sticky header with a 970x250 ad, however, such as the Washington Post.

Sticky navigation on phones is not OK, but I actually like when the nav pops down when I scroll back up. A "peek-a-boo" nav, if you will.

Re: Kill Sticky Headers (2013)

#24

Post by shbooms »

liability wrote: post #13

Ever since I started using unlock origin's cosmetic filters to remove headers, footers and sidebars from most websites I visit, the web has become a much more enjoyable place. These 'engagement hacks' do little other than make your website look cluttered and distracting, which probably gets misinterpreted as 'engagement'.

you can also use uBO's ":style()" function to override css properties and effectively "un-sticky" the majority of header/nav elements if you prefer not removing them completely. I use these two filters to globally un-stick every header and nav element which uses CSS position properties to sticky themselves (which is a good many of them):

    ##header:style(position: absolute !important)
    ##nav:style(position: absolute !important)

Re: Kill Sticky Headers (2013)

#25

Post by pcr910303 »

For people who would like a more concise source (in ES6 & a bit of functional style):

    [...document.querySelectorAll("*")].filter(el => getComputedStyle(el).position === "fixed").forEach(el => el.parentNode.removeChild(el));
The code above also works, you can add the URL below to bookmarks.

    javascript:[...document.querySelectorAll("*")].filter(el%20=>%20getComputedStyle(el).position%20===%20"fixed").forEach(el%20=>%20el.parentNode.removeChild(el));
Also, for people who uses Safari:

You can add javascript: links to your bookmark by adding any bookmark & changing the URL.

Re: Kill Sticky Headers (2013)

#26

Post by pgcj_poster »

vortico wrote: post #12

Sticky headers make me feel claustrophobic, I don't know why. Regardless of my screen height (it could be a 30" monitor), it feels like something is "stuck" to my browser that wasn't before and makes me feel anxious. Even without that feeling, sticky headers kill the feeling that I'm moving through a viewport of a webpage. It makes your website look like it's not of the "webpage" medium that I've been familiar with f…

Exactly. When I'm using an application called a browser to view a document on the web, I don't want the document to try to become part of the chrome: that breaks the "web page" metaphor. There is a very small subset of websites, such as Figma, that feel more like independent applications than web pages, and for those I get more annoyed by the presence of the browser chrome, for basically the same reason.

What's worse, almost no sticky header has any useful items in it. Take StackOverflow as an example. It has a link to the homepage and a searchbar, in spite of the fact that many frequent StackOverflow users have never visited the homepage and never used the built-in search. The top of the screen is the most valuable part, because my head is usually above the screen, so it's more comfortable for my eyes to rest around the top of the viewport. So if you put something there, it had better be important.

Re: Kill Sticky Headers (2013)

#27

Post by baroffoos »

vortico wrote: post #12

Sticky headers make me feel claustrophobic, I don't know why. Regardless of my screen height (it could be a 30" monitor), it feels like something is "stuck" to my browser that wasn't before and makes me feel anxious. Even without that feeling, sticky headers kill the feeling that I'm moving through a viewport of a webpage. It makes your website look like it's not of the "webpage" medium that I've been familiar with f…

I think the only time sticky headers are ever acceptable is when you need to regularly refer back to them. Long tables without sticky headers are the worst

Re: Kill Sticky Headers (2013)

#30

Post by Andrex »

baroffoos wrote: post #28
Fauntleroy wrote: post #3

It's worth noting that this solution will not work for anything using the relatively new `position: sticky`

> relatively new sticky has been around since at least 2014

sticky was originally added to Chrome in 2014 behind a flag, but that implementation was removed and the feature wasn't reimplemented and released to stable until 2017.

Also "relatively new" is still accurate in web terms, which has specifications dating to the 90s.

Post reply on HN