I hate sticky headers. And sticky sidebars. Let me tell you why.
By that I mean any content that stays at the top of the page even after you've scrolled down. I also hate sticky sidebars. By which I meant content at the side of the page that doesn't move as you scroll down.
The problem with sticky headers
By sticky headers I mean any content that stays at the top of the page even after you've scrolled down. They're generally used to make the navigation always be at the top of the screen, no matter how far down it you've gone.
My initial problem with these is that they're unnecessary. If I need to go to another page, I'll just go back to the top of the page. On a computer you can use the Home key, on a mobile or tablet you can press on the very top bit of the screen where it tells you the time, connectivity, battery etc.
But if it was merely unnecessary, I could live with it. The big problem with it is that it makes it impossible to read all of the content. To show you what I mean I've created a Codepen.
It has a sticky header, then below it is a heading and 100 paragraphs. In the embed the last paragraph I can see is paragraph 7.
If I page down - using either the page down key or the spacebar - the nav stays where it is. And because I've made sure the nav only fills the left half of the screen I can see that paragraphs 8 and 9 go behind it. If it filled the whole screen and I paged down, I'd have missed those two paragraphs completely.
Which is so annoying, because this is how I scroll. I either miss things and am confused or have to then use the arrow keys to scroll back up a bit.
There was a point when Twitter did this. Back then all tweets were 140 characters and the only way to retweet was to put RT at the start. This meant that all tweets were in the same size box. When I was on the website and pressed page down, literally a whole tweet went behind the header. The only way I could tell what was going on was if I had half a tweet at the bottom of one page and half a tweet of a different tweet and the top of the page. It's confusing and annoying.
So, stop it. Or carry on using it, but at least make sure all the content is readable and it's not vanishing below your sticky header (position: fixed and some padding at the top of the body will solve it nicely).
The problem with a sticky sidebar
They're unreadable. If there is content below the bottom of the screen and you can't scroll it, how can you read it? This is a problem on blogs on dev.to. Even with my browser full screen I have to zoom out to 80% to see it all. And then of course it's too small to read easily.
How exactly are they expecting people to read all of that? Or maybe they aren't, in which case why is it there in the first place?
It's annoying that there is something there that could be important or interesting, but there is no way of seeing it.
In conclusion
Please make sure your website is readable.
Top comments (0)