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.