6.1 position: sticky
Sticky positioning (position: sticky) in CSS combines the characteristics of relative and fixed positioning. Elements with sticky positioning behave like relatively positioned elements until they reach a defined scroll threshold, after which they become fixed.
Features of sticky positioning:
- An element with
position: stickybehaves like relatively positioned until it reaches a certain scroll position - After reaching the specified threshold, the element becomes fixed and stays in place until exceeded by another scroll threshold
- Sticky positioning works only within the parent container. When the parent container goes out of the viewport bounds, the sticky element loses its fixed properties
Sticky positioning syntax
To apply sticky positioning, use the position: sticky property and the coordinates top, right, bottom, or left to set the scroll threshold.
.element {
position: sticky;
top: value;
right: value;
bottom: value;
left: value;
}
Where:
top: distance from the top edge of the browser window to the top edge of the elementright: distance from the right edge of the browser window to the right edge of the elementbottom: distance from the bottom edge of the browser window to the bottom edge of the elementleft: distance from the left edge of the browser window to the left edge of the element
Example:
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.header {
position: sticky;
top: 0;
background-color: deepskyblue;
padding: 10px;
font-size: 24px;
color: white;
}
.content {
margin-top: 25px;
background-color: lightgrey;
padding: 20px;
}
HTML
<div class="wrapper">
<div class="header">Sticky Header</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
In this example, the header with the class .header will stay in place as you scroll the page until its top edge reaches the top edge of the viewport.
6.2 Pros and Cons of Sticky Positioning
Pros of Sticky Positioning
- Enhancing User Interface:
- Sticky elements like headers, navigation bars, and sidebars improve navigation and content accessibility on long pages by staying visible to the user
- Combination of Relative and Fixed Positioning Advantages:
- Sticky positioning lets elements stay in the document flow, keeping their relative position, until the scroll threshold is reached. This provides more natural behavior for the elements
- Ease of Implementation:
- Sticky positioning is easy to implement with minimal code and without the need for JavaScript
Cons of Sticky Positioning
- Limited Support in Older Browsers:
- Sticky positioning is supported by most modern browsers but may not work in older versions, which might require additional compatibility solutions
- Dependency on Parent Containers:
- Sticky positioning works only within the parent container. If the parent container goes out of the viewport bounds, the sticky element loses its fixed properties
- Content Overlap Issues:
- Sticky elements may overlap other elements on the page if their height or width is not taken into account during layout design
6.3 Examples of Sticky Positioning
1. Sticky Sidebar
Creating a sticky sidebar that remains visible while scrolling the content.
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.container {
display: flex;
}
.sidebar {
position: sticky;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 10px;
}
.content {
background-color: lightgrey;
padding: 20px;
}
HTML
<div class="wrapper">
<div class="container">
<div class="sidebar">Sticky Sidebar</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
</div>
In this example, the sidebar with the class .sidebar will stay in place while scrolling the content.
2. Sticky Table Header
Creating a sticky table header that stays visible while scrolling through large sets of data.
CSS
.wrapper {
height: 200px;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
position: sticky;
top: 0;
background-color: deepskyblue;
color: white;
}
tbody {
min-height: 300px;
display: block;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
HTML
<div class="wrapper">
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
</tbody>
</table>
</div>
In this example, the table header will stay in place while scrolling the table's content.
GO TO FULL VERSION