Sticky positioning blends relative and fixed behavior: an element scrolls normally until it reaches an offset threshold, then stays in place within its containing block. section 8.11
As the page scrolls, sticky positioning behaves like this:
- The element begins in its normal position and moves with the page. section 8.11
- A top, right, bottom, or left offset sets the point where it sticks. section 8.11
- When the parent container reaches the stuck element, it becomes unstuck and continues scrolling with the parent. section 8.11
A navigation bar that sticks
nav { position: sticky; top: 0; z-index: 10; } This lets the navigation scroll normally until it reaches the top of the viewport, where it remains visible without forcing the page header to stay fixed. section 15.8
.nav-links {
position: sticky;
top: 5px;
}
Use this small rule as a starting pattern for making navigation links stick five pixels from the top of the viewport. section 8.11
