Sticky
sticky lets you use position sticky on an element with some enhancements.
Position sticky made easy
Instead of having to remember to use position:sticky and top, just use sticky and you’ll have a sticky element.
<div class="sticky">...</div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Sticky on the Bottom, Left, and Right
sticky supports position:sticky on all four directions. To active these other directions, you need to set top to auto and the direction (bottom, left or right) to the value you desire.
<div class="sticky top-auto bottom-0">...</div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Checking if elements are sticking is pretty easy too
Just include our sticky script, then add sticky-check to your sticky element.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Basic Usage
sticky lets you use position: sticky you use position sticky on an element in an easy way.
<div class="overflow-auto"> <div class="sticky"></div></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
How sticky Works
You must be satisfy three conditions for position:sticky to work:
- There must be a scrollable ancestor element. Usually, would be the
<body>element. - The parent element of
stickymust contain sufficient height for it to scroll. - If scrolling vertically, the
stickyelement must have atoporbottomattribute to determine where it sticks. If scrolling horizontally, it must have aleftorrightattribute.
Adjusting sticky position
Top
You can change top to reposition how far away from the top the sticky element should stick.
<div class="sticky top-4"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Bottom, Left, and Right
To put sticky on other sides, set top to auto and set bottom, left, or right to the value you desire.
<div class="sticky top-auto bottom-4"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
<!-- Bottom --><div class="sticky top-auto bottom-0"> ... </div>
<!-- Left --><div class="sticky top-auto left-0"> ... </div>
<!-- Right --><div class="sticky top-auto right-0"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Padding in the container
If the scrollable container has a padding, sticky will respect that padding value before calculating the top, bottom, left, or right values.
If you want sticky to stick to the edge of that container, you have to compensate for that padding by using negative inset.
<div class="sticky -top-4"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
You can only inset values for one side — top, bottom, left or right. If you wish to adjust the sticky element’s position for other sides, you will need to use margin or breakout.
Changing z-index
You can change the z-index value for sticky with the z-index property or --z-index variable.
<div class="sticky z-[20]"> ... </div>Checking if a sticky element is sticking
CSS doesn’t provide a way to detect if an element is in a sticking state, so we wrote a script that does it.
Import the script to use it.
import { sticky } from '@splendidlabz/layouts/scripts'sticky()Next, add sticky-check to the sticky element to check for a sticking state.
<div class="sticky sticky-check">...</div>Styling sticking items
sticky items that are sticking will have a sticking class added to them.
<div class="sticky sticky-check sticking">...</div>You can style these elements with Tailwind or CSS. If you use Tailwind, you can use the sticking variant to do so:
<div class="sticky sticky-check sticking:bg-blue-800 sticking:border-blue-400"></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
.sticking { background: var(--color-blue-800); border-color: var(--color-blue-400);}Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Sticking Observer Timeout
The sticky script uses MutationObserver to observe the DOM for sticky-check items that are loaded asynchronously. By default, it listens to DOM changes for 1000ms.
You can change this value when using the sticky script.
import { sticky } from '@splendidlabz/layouts/scripts'sticky(document.body, { observerTimeout: 2000 })If you wish to disable the MutationObserver behaviour, set observerTimeout to 0.
import { sticky } from '@splendidlabz/layouts/scripts'sticky(document.body, { observerTimeout: 0 })Async sticky elements
If it doesn’t make sense to use MutationObserver, you can run the sticky script when your asynchronous element is loaded.
Sticky In Sidebar
Sticky an element in the sidebar
Two things to do here:
- Make sure the sidebar has sufficient
heightto contain the sticky element. - Set
stickyto the element you want to stick.
<div class="grid-fr-auto"> <div> Content </div> <div class="w-[15rem]"> <div>SB Item 1</div> <div class="sticky">SB Item 2</div> </div></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Sticky the entire sidebar
Two things to do here:
- Set
stickyto the sidebar. - Ensure the sidebar does not occupy the entire height.
For #2, you can use align-self: start if the sidebar is in a grid. We’ve done this for you in sticky so you don’t have to worry about it.
<div class="grid-fr-auto"> <div> Content </div> <div class="w-[15rem] sticky"> Sidebar </div></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Basic Usage
sticky lets you use position: sticky you use position sticky on an element in an easy way.
<div class="overflow-auto"> <div class="sticky"></div></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
How sticky Works
You must be satisfy three conditions for position:sticky to work:
- There must be a scrollable ancestor element. Usually, would be the
<body>element. - The parent element of
stickymust contain sufficient height for it to scroll. - If scrolling vertically, the
stickyelement must have atoporbottomattribute to determine where it sticks. If scrolling horizontally, it must have aleftorrightattribute.
Adjusting sticky position
Top
You can change top to reposition how far away from the top the sticky element should stick.
<div class="sticky top-4"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Bottom, Left, and Right
To put sticky on other sides, set top to auto and set bottom, left, or right to the value you desire.
<div class="sticky top-auto bottom-4"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
<!-- Bottom --><div class="sticky top-auto bottom-0"> ... </div>
<!-- Left --><div class="sticky top-auto left-0"> ... </div>
<!-- Right --><div class="sticky top-auto right-0"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Padding in the container
If the scrollable container has a padding, sticky will respect that padding value before calculating the top, bottom, left, or right values.
If you want sticky to stick to the edge of that container, you have to compensate for that padding by using negative inset.
<div class="sticky -top-4"> ... </div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
You can only inset values for one side — top, bottom, left or right. If you wish to adjust the sticky element’s position for other sides, you will need to use margin or breakout.
Changing z-index
You can change the z-index value for sticky with the z-index property or --z-index variable.
<div class="sticky z-[20]"> ... </div>Checking if a sticky element is sticking
CSS doesn’t provide a way to detect if an element is in a sticking state, so we wrote a script that does it.
Import the script to use it.
import { sticky } from '@splendidlabz/layouts/scripts'sticky()Next, add sticky-check to the sticky element to check for a sticking state.
<div class="sticky sticky-check">...</div>Styling sticking items
sticky items that are sticking will have a sticking class added to them.
<div class="sticky sticky-check sticking">...</div>You can style these elements with Tailwind or CSS. If you use Tailwind, you can use the sticking variant to do so:
<div class="sticky sticky-check sticking:bg-blue-800 sticking:border-blue-400"></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
.sticking { background: var(--color-blue-800); border-color: var(--color-blue-400);}Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Sticking Observer Timeout
The sticky script uses MutationObserver to observe the DOM for sticky-check items that are loaded asynchronously. By default, it listens to DOM changes for 1000ms.
You can change this value when using the sticky script.
import { sticky } from '@splendidlabz/layouts/scripts'sticky(document.body, { observerTimeout: 2000 })If you wish to disable the MutationObserver behaviour, set observerTimeout to 0.
import { sticky } from '@splendidlabz/layouts/scripts'sticky(document.body, { observerTimeout: 0 })Async sticky elements
If it doesn’t make sense to use MutationObserver, you can run the sticky script when your asynchronous element is loaded.
Sticky In Sidebar
Sticky an element in the sidebar
Two things to do here:
- Make sure the sidebar has sufficient
heightto contain the sticky element. - Set
stickyto the element you want to stick.
<div class="grid-fr-auto"> <div> Content </div> <div class="w-[15rem]"> <div>SB Item 1</div> <div class="sticky">SB Item 2</div> </div></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Sticky the entire sidebar
Two things to do here:
- Set
stickyto the sidebar. - Ensure the sidebar does not occupy the entire height.
For #2, you can use align-self: start if the sidebar is in a grid. We’ve done this for you in sticky so you don’t have to worry about it.
<div class="grid-fr-auto"> <div> Content </div> <div class="w-[15rem] sticky"> Sidebar </div></div>Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
Ignore this text and focus on the sticky item instead. The purpose of this is to increase the height of the content so we can showcase the sticky item.
This is the CSS for sticky.
.sticky { position: sticky; top: 0; z-index: var(--z-index, 15);
:where([class*='grid'] > &) { align-self: start; }}Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
This is the CSS for sticky.
.sticky { position: sticky; top: 0; z-index: var(--z-index, 15);
:where([class*='grid'] > &) { align-self: start; }}Sticky
Classes
| Class | Description |
|---|---|
sticky | The sticky element |
sticky-check | Use the sticky script to check if the sticky element is sticking |
sticking | Will be present when the sticky element is sticking |
CSS Properties
| Property | Default | Description |
|---|---|---|
top | 0 | The top position of the sticky element |
bottom | - | The bottom position of the sticky element |
left | - | The left position of the sticky element |
right | - | The right position of the sticky element |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--z-index | 15 | z-index value for the sticky element |
sticky script
Use the sticky script like this:
import { sticky } from '@splendidlabz/styles/scripts'sticky(selector, { observerTimeout: 1000,})| Prop | Default | Description |
|---|---|---|
selector | undefined | Observes all elements with sticky-check inside this container. When undefined, it defaults to document.body. |
observerTimeout | 1000 | The amount of time to watch for elements with sticky-check. To disable watching behaviour, set this to 0 |
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Sticky
Classes
| Class | Description |
|---|---|
sticky | The sticky element |
sticky-check | Use the sticky script to check if the sticky element is sticking |
sticking | Will be present when the sticky element is sticking |
CSS Properties
| Property | Default | Description |
|---|---|---|
top | 0 | The top position of the sticky element |
bottom | - | The bottom position of the sticky element |
left | - | The left position of the sticky element |
right | - | The right position of the sticky element |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--z-index | 15 | z-index value for the sticky element |
sticky script
Use the sticky script like this:
import { sticky } from '@splendidlabz/styles/scripts'sticky(selector, { observerTimeout: 1000,})| Prop | Default | Description |
|---|---|---|
selector | undefined | Observes all elements with sticky-check inside this container. When undefined, it defaults to document.body. |
observerTimeout | 1000 | The amount of time to watch for elements with sticky-check. To disable watching behaviour, set this to 0 |