“Position: Fixed” Considered Harmful
Nothing is more misused and abused in CSS than position: fixed. This declaration detaches the page element from the normal layout flow, but unlike position: absolute the element will no longer be bound to a certain parent element (whose position value isn’t static), but will use the browser’s viewport (the area which displays the content) as a reference, so no matter where you scroll, it will stay wherever it’s meant to be.
Adept designers and UX gurus, no doubt with some help from efficient SEO experts, have quickly realized this can be used to keep the Most Important Parts of web pages in front of the visitors permanently. No, of course they don’t mean the content – the Most Important Parts, according to them, that must always remain visible, are the site’s logo, the navigational links to show just how much content you’re supposed to get, and exceptionally useful messages like cookie policy and legal statements, and of course the mandatory social sharing icons – the more the better. Who cares about the content?
Well, I usually do. In fact, when I go to a website I’m not interested in these ever-present headers and footers and sidebars. (I’m looking at you, Medium.com.) I can always hit the Home and End keys to jump to the navigation or wish to find your promises regarding privacy. Even on mobile a tap on the browser’s title bar scrolls the page all the way up. I also like to advance the content as I read by pressing PageDown or Space, and it happens more often than not with fixed page components that the content proceeds by the height of the viewport – but without this value being reduced by the height of the fixed components. This causes some content to slide under the header and become partially hidden, so I have to scroll up a bit, which pulls me out of the flow (the immersion of reading experience) and increases the chance of my leaving the website, annoyed.
My advice is that if you’re considering using position: fixed – just don’t, unless you’re absolutely sure it will truly enhance the user experience.