CSS Sticky

Position: sticky is a CSS positioning mode that combines the behavior of relative and fixed. The element is positioned normally in the document flow, but when it reaches a specified threshold during scrolling, it stays fixed there as long as its parent element contains it.

Basic sticky header

One of the most common uses of sticky positioning is keeping the header fixed while scrolling. Along with position: sticky, you must also specify the top value, which defines how far the element should be from the top of the browser.

In this example, we create a sticky header that always stays at the top of the screen while scrolling the content.

Sticky sidebar

Sticky positioning is not just for headers, it can also be used for sidebars. This way navigation or other information blocks remain visible while the main content is scrollable.

In this example, we create a sticky sidebar that remains visible beside the content while scrolling.

Tips for using sticky

Sticky elements are useful for better navigation and user experience, but they must be applied correctly.

• Always specify a top, left, right, or bottom value for the sticky element, otherwise it will not work.
• Make sure the parent element has enough height, otherwise the sticky element will not fix properly.
• Use sticky for navigation menus, sidebars, or headers, but do not overuse it, as too many fixed elements can be distracting.