“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.
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.