Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relatively positioned until it scrolls to a specific point in the viewport, after which it becomes fixed. This is commonly used for creating sticky headers or navigation bars that stay visible as the user scrolls down the page.
Example 1: Basic Sticky Navigation
/* In this example, the navigation bar will stick to the top of the viewport once the user scrolls past it. */
.nav-bar {
position: sticky;
top: 0;
background-color: #333;
padding: 1rem;
}
Explanation
The position: sticky; property is applied to the navigation bar. The top: 0; declaration tells the browser to make the element stick to the top of the viewport when the user's scroll position reaches it.
Example 2: Sticky Section Header
/* Here, the section header becomes sticky as the user scrolls through its parent container. */
.section-header {
position: sticky;
top: 0;
background-color: #f2f2f2;
padding: 0.5rem;
border-bottom: 1px solid #ccc;
}
Explanation
This example demonstrates how position: sticky can be used within a scrolling container. The header will remain at the top of its parent section as the user scrolls through the content of that section.
Example 3: Sticky with a Top Offset
/* This sticky element will have a 20px offset from the top of the viewport. */
.sticky-offset {
position: sticky;
top: 20px;
background-color: #ffc107;
padding: 1rem;
}
Explanation
The top: 20px; value creates a space between the top of the viewport and the sticky element. This is useful when you have another fixed element at the very top, like a banner.
Example 4: Sticky Left Sidebar
/* This example shows a sidebar that sticks to the left side of its container. */
.sidebar {
position: sticky;
top: 0;
left: 0;
width: 200px;
background-color: #add8e6;
}
Explanation
By setting top: 0; and left: 0;, the sidebar will remain fixed to the top-left corner of its container as the user scrolls vertically. This is a common pattern for dashboard layouts.
Example 5: Sticky Footer within a Container
/* The footer will stick to the bottom of its parent container as the user scrolls. */
.container-footer {
position: sticky;
bottom: 0;
background-color: #4CAF50;
color: white;
padding: 1rem;
}
Explanation
Instead of top, this example uses bottom: 0; to make the element stick to the bottom of its container. This can be useful for action bars or footers within specific sections.
Example 6: Sticky Table Headers
/* This makes the table header row sticky, which is great for long data tables. */
th {
position: sticky;
top: 0;
background-color: #fff;
border-bottom: 2px solid #000;
}
Explanation
Applying position: sticky; to table headers (<th>) ensures that the column titles remain visible as the user scrolls through the table's rows, improving data readability.
Example 7: Sticky with a z-index
/* This sticky element will appear above other elements due to its z-index. */
.sticky-z-index {
position: sticky;
top: 0;
background-color: #f44336;
padding: 1rem;
z-index: 100;
}
Explanation
The z-index: 100; property ensures that the sticky element will render on top of other content on the page when it becomes fixed. A higher z-index value means the element is closer to the viewer.