Sticky Positioning
position: sticky acts like relative until the element reaches a threshold (e.g. top: 0), then it behaves like fixed within its parent.
CSS
Intermediate
5 min read
position: sticky
Example
/* Sticky table header */
th {
position: sticky;
top: 0; /* Sticks when it reaches the top of the scroll container */
background: white;
z-index: 1;
}
/* Sticky sidebar in an article */
.sidebar {
position: sticky;
top: 80px; /* Sticks 80px from top (below navbar) */
max-height: calc(100vh - 80px);
overflow-y: auto;
} Pro Tip
Sticky positioning only works if a parent element does not have overflow: hidden or overflow: auto set.