How to Create an On Scroll Fixed Navigation Bar with CSS

Updated on December 30, 2018Published on December 30, 2018

Earlier to create a navigation bar which would become fixed on scrolling, there was no way to do it without Javascript. The window.onscroll event needed to be listened for. The offset position of navigation bar had to be calculated first, then ... then the CSS position: fixed was applied to the navbar to make it fixed.

The process worked, but it had it own glitches, specially performance issues — it is never a good idea to listen for an onscroll event. For tiny cases you may get away, for more complex cases the application will start stuttering.

But now things have changed in modern browsers. You can create a sticky element using just CSS !

Demo

Switching Between Relative & Fixed Positioning with position: sticky

position: sticky comes between position: relative and position: fixed. It behaves like a relatively positioned element within its parent, but when it crosses a specified threshold in the viewport (screen), it becomes "stuck" to the screen and becomes a fixed element.

Consider the following CSS :

.sticky-navbar {
position: sticky;
top: 15px;
}

When the distance of the element is more than 15px from the top of the screen, it will behave like a normal element. During scrolling when the distance becomes 15px (or less) from the top, it becomes fixed. Furthermore during scrolling when distance becomes more than 15px, it becomes a normal element once again.

It is because the navbar (which is a child of the outer container) would be visible only when the parent is visible. Once the user scrolls beyond the outer container, it gets hidden and the child gets hidden too.

A sticky element is fixed until it reaches the boundary of the parent container.

Don't forget to add top CSS for the sticky navbar.

Without either a top, bottom, right or left property, it is the same as relatively positioned, so it won't become stuck.