Position sticky

position: sticky is a lot like fixed, except it is only pulled out of the flow when it hits the point you told it as you scroll. Generally, you’ll give it a top: 0, so when that element has an offset of 0 from the viewport, it “sticks” there like a fixed element.

I’d suggest using sticky for navbars, instead of fixed, because they’ll take up space until you start to scroll.

See the Pen fixed navbar by Kevin (@kevinpowell) on CodePen.

An important difference is that it isn’t pulled out of the flow until it “sticks”.

See the Pen nav position sticky by Kevin (@kevinpowell) on CodePen.

Another important difference is that it can’t escape it’s parent like a fixed element can.

See the Pen sticky vs fixed by Kevin (@kevinpowell) on CodePen.

Which can open up some fun possibilities.

See the Pen position sticky - pushing things out of the way by Kevin (@kevinpowell) on CodePen.