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

41–50 of 84 posts

Re: Kill Sticky Headers (2013)

#41

Post by sideproject »

It took me awhile to realize how bad sticky divs are for my users. Justification of using sticky elements was that they were always visible. But why? Because they are frequently accessed elements? Scrolling to top doesn't take much of effort. They might be frequently accessed, but they were also not that hard to access.

It hit me hard, when I saw my user's screen which was relatively small and my sidebar and header were both sticky, leaving only a small area to display the main content.

I've now gone back to mostly non-sticky elements. It's refreshing. Not seeing those "frequently accessed" elements isn't much of an issue. I don't think I ever complained about popular websites not having its header sticky.

Letting users focus on the main content has been by far the most beneficial thing from my perspective.

Re: Kill Sticky Headers (2013)

#42

Post by dezren39 »

pcr910303 wrote: post #25

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=>%20…

Thanks! That's a lot easier on the eyes!

So I did this:

  javascript:(function()%7B(function () %7Bvar i%2C elements %3D document.querySelectorAll('body *')%3Bfor (i %3D 0%3B i
To add the flashbar from AWS to the mix, how would I do that with the streams like this? I'm sure if I hunt a bit I'll figure it out.

Re: Kill Sticky Headers (2013)

#43

Post by mgnn »

shbooms wrote: post #24
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 !im…

I use a more simplistic solution: I bind a keyboard shortcut to uBO's element zapper so I can just zap sticky headers as I find them. I have to zap for every repeat visit, but the same shortcut works for zapping sticky sidebar videos or other undesirable elements too.

Re: Kill Sticky Headers (2013)

#44

Post by baroffoos »

joegahona wrote: post #23

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.

I like the well done hiding nav bar in my browser but the web ones tend to go mental popping up and down randomly. And then it just magnifies the crappiness when you have 2 stacked nav bars from the browser and website which are both trying to hide/unhide.

The ideal hiding navbar is one which is the only one on the screen and one which only pops down as much as the user scrolls so you have to scroll up one navbars worth to get the full thing and not the ones where you scroll up 1 px by accident and the full navbar flys down

Re: Kill Sticky Headers (2013)

#45

Post by miguelmota »

Instead of a bookmarklet I recommend using a browser extension like greasemonkey or tampermonkey to autorun the script and have the sticky headers unstuck on page load. No manual work of clicking the bookmarklet.

Re: Kill Sticky Headers (2013)

#46

Post by mumblemumble »

sideproject wrote: post #41

It took me awhile to realize how bad sticky divs are for my users. Justification of using sticky elements was that they were always visible. But why? Because they are frequently accessed elements? Scrolling to top doesn't take much of effort. They might be frequently accessed, but they were also not that hard to access. It hit me hard, when I saw my user's screen which was relatively small and my sidebar and header w…

Thank you.

As a user of a laptop with a small screen, I can say that, at least where I'm concerned, making those "frequently accessed" elements sticky is a great way to ensure I won't access them that much. I don't much go for non-enjoyable reading experiences. So I'm either going to hit the reader button to make the header disappear from my life, or, if that's not an option, I'm going to read what I came for and then go somewhere more fun.

Re: Kill Sticky Headers (2013)

#47

Post by rblatz »

partiallypro wrote: post #33
joegahona wrote: post #23

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.

Really? I feel like a navigation stuck to the top on a phone is a must. Scrolling on a phone us much more complicated and tedious than with a mouse; as long as it's small and not intrusive.

Just tap the top of the screen and your browser scrolls up. Most of the time I come across a sticky nav bar and footer I just turn on reader view and turn off all the site’s terrible styling.

Re: Kill Sticky Headers (2013)

#48

Post by hombre_fatal »

ethagnawl wrote: post #35

There are few things that frustrate me more than scrolling down a web page, while trying to read and article, and having the header become sticky and obscure what I'm reading. As far as I can remember, the _only_ app I've ever seen get this exactly right (in terms of not ever obscuring text) is the New York Times' Android app.

It's even worse when it only appears when you're scrolling up. You want to scroll up one line to re-read the sentence that scrolled off screen. Nope, now you have to scroll 50px because the navbar spawned. Oh, it's gone again. Nope, it's back, I didn't even mean to scroll up 1px that time.

It's no wonder my girlfriend makes more than I do as a UX professional. Someone on the team that actually has the users' interest at heart is critical. Else you get these ridiculous break-room ideas that nobody spent more than 5 seconds thinking about.

Re: Kill Sticky Headers (2013)

#49

Post by JacobSeated »

I just finished studying Multimedia design at KEA (Copenhagen School of Design and Technology), and I was surprised how popular sticky headers were among the teachers. Some even arguing they improved the browsing experience. Clearly they could not be more wrong.

I think part of the issue is, educationally, people gets told that sticky headers and huge font-size or white space is good design. In reality, they are just chasing away people from their websites.

Webdesign trends are so hostile towards users...

Post reply on HN