Sticky

Sticky lets you use position sticky on an element with some enhancements.

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>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi debitis facere dolore deleniti neque excepturi necessitatibus, molestiae quis amet tempore totam quaerat blanditiis quasi magni rem. Ducimus necessitatibus eum quia.

Scroll and see this stick

Reposition your sticky element

Just change the top value if you want the sticky element have a little bit of offset.

<div class="Sticky top-[1rem]">...</div>

There will be 1rem of extra space on the top in this demo

Sticky on the Bottom, Left, and Right too

All four directions are supported. To activate these other directions, just set top to auto and the direction (bottom, left or right) to the value you desire.

<div class="Sticky top-auto bottom-0">...</div>

Sticks to the bottom

Item 1

Item 2

Sticky

Sticks to the left

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Sticky

Sticks to the right

Item 9

Item 10

Item 11

Checking if elements are sticking is pretty easy

Just use our Sticky script and add Sticky-check to your element. Elements that are sticking will now have a sticking class.

<div class="Sticky Sticky-check">...</div>

Note

In this Demo, elements will turn blue when they stick!

Sticks to the top

Sticks to the bottom

Item 1

Item 2

Sticky

Sticks to the left

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Sticky

Sticks to the right

Item 9

Item 10

Item 11

Basic Usage

Sticky lets you use position sticky on an element.

<div class="overflow-auto">
  <div class="Sticky"></div>
</div>

How Sticky Works

For position:sticky to work, it must be satisfy three conditions:

An ancestor element in able to scroll by using overflow: auto or overflow: scroll. The <body> element is also considered a scrollable ancestor.
The parent element of Sticky must contain sufficient height for it to scroll.
If scrolling vertically, the Sticky element must have a top or bottom attribute to determine where it sticks. If scrolling horizontally, it must have a left or right attribute.

If these two conditions are satisified, Sticky would work. If not, Sticky won’t.

Troubleshooting Sticky

What trips most people up is trying to use Sticky on a sidebar.

There are two questions to resolve here:

Do you want the entire sidebar to be sticky?
Do you want only the element to be sticky?

If you want the entire sidebar to be sticky, you can add position: sticky to the sidebar. At the same time, you also need to ensure the sidebar is not stretch.

We resolve this problem for you in Sticky if you use any of our Grid layout components.

<!-- Here's what you need to do normally with HTML and CSS -->
<!-- HTML -->
<div class="ContentSidebar">
  <div> Content </div>
  <div class="Sidebar"> Sidebar </div>
</div>

<!-- CSS -->
<style>
  .ContentSidebar {
    display: grid;
    grid-template-columns: 1fr 15rem;
    gap: 1rem;
  }

  .Sidebar {
    position: sticky;
    top: 0;
    align-self: start
  }
</style>

<!-- Here's what you need with Sticky and our Grid layouts -->
<div class="GridFrAuto">
  <div> Content </div>
  <div class="w-15rem Sticky"> Sidebar </div>
</div>

To make one element in the sidebar sticky, you have to make the sidebar stretch the full height. Then, add position:sticky to the element within.

<!-- Here's what you need to do normally with HTML and CSS -->
<!-- HTML -->
<div class="ContentSidebar">
  <div> Content </div>
  <div>
    <div> SB Item 1 </div>
    <div class="sticky"> SB Item 2 </div>
  </div>
</div>

<!-- CSS -->
<style>
  .ContentSidebar {
    display: grid;
    grid-template-columns: 1fr 15rem;
    gap: 1rem;
  }

  .sticky {
    position: sticky;
    top: 0;
  }
</style>

<!-- Here's what you need with Sticky and our Grid layouts -->
<div class="GridFrAuto">
  <div> Content </div>
  <div class="w-15rem">
    <div>SB Item 1</div>
    <div class="Sticky">SB Item 2</div>
  </div>
</div>

Adjusting Sticky Position

Sticky needs a top, bottom, left, or right attribute to determine where it sticks. By default, we set top to 0 because that’s the most common use case.

Vertical Repositioning

You can change top to reposition how far away from the top the Sticky element should stick.

<div class="GridFrAuto">
  <div> Content </div>
  <div class="w-15rem Sticky top-8"> Sidebar </div>
</div>

If you want Sticky to stick to the bottom, set top to auto and bottom to the value you desire.

<div class="GridFrAuto">
  <div> Content </div>
  <div class="w-15rem Sticky top-auto bottom-0"> Sidebar </div>
</div>

Horizontal Repositioning

If you want Sticky to stick to the left, set left to the value you desire. Setting top to auto is optional.

<div class="Scrollable-horizontal">
  <div> Item 1 </div>
  <div> Item 2 </div>
  <div> Item 3 </div>
  <div class="Sticky left-0">Sticky</div>
</div>

If you want Sticky to stick to the right, set right to the value you desire. Setting top to auto is optional.

<div class="Scrollable-horizontal">
  <div> Item 1 </div>
  <div> Item 2 </div>
  <div> ... </div>
  <div class="Sticky right-0">Sticky</div>
</div>

Sticky and Padding

If the parent scrollable container has a padding, Sticky will respect that padding value before calculating the top, bottom, left, or right values.

You can adjust the top, bottom, left and right values accordingly to compensate for the padding values.

Scroll, and you’ll see a gap between the container and the sticky element

Sticky Element

<div class="Sticky -top-4">Sticky Item</div>

Note

Do note that only one value — top, bottom, left or right — will be used because Sticky can only stick to one side. To compensate for the padding on other sides, you may have to use Breakout or negative margins.

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>

<div class="Sticky" style="--z-index: 20;">
  <div>...</div>
  <div>...</div>
</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. You can use the script by running the Sticky script we included.

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 items that are sticking

Sticky items that are sticking will have a sticking class added to them.

<!-- Items that are sticking will have the sticking class -->
<div class="Sticky Sticky-check sticking">...</div>

You can style these items with CSS or Tailwind. If you use our layouts preset, you can use the sticking variant too.

.sticking {
  /* ... Your styles here ... */
  background: blue;
}

<div class="Sticky Sticky-check [.sticking]:bg-blue-500"></div>

<div class="Sticky Sticky-check sticking:bg-blue-500"></div>

Here’s a bonus styling tip. If you want to style elements within a sticking one, you have to use Tailwind arbitary variants. (Or, just use CSS if you’re more comfy with that!).

.sticking {
  .element {
    /* ... Your styles here ... */
    background: blue;
  }
}

<div class="Sticky Sticky-check">
  <div class="[.sticking_&]:bg-blue-500"> ... </div>
</div>

Sticking Observer Timeout

The Sticky script uses MutationObserver to observe the DOM for Stick-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

Even if you don’t use MutationObserver to watch for Sticky-check elements, you can always run the script again when you load your asynchronous sticky element.

import { Sticky } from '@splendidlabz/layouts/scripts'
const element = /* Grab your element here */;

Sticky(element)

Using Sticky in a table

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

This is the CSS for Sticky.

.Sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-index, 15);

  :where([class*='Grid'] > &) {
    align-self: start;
  }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Sticky

Class	Description
`Sticky-check`	Use `Sticky` script to check if element is sticking
`sticking`	Will be present when element is sticking

Properties

Property	Description
`top`	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

The Sticky script has the following :

Sticky(selector, {
  observerTimeout: 1000,
})

Prop	Default	Description
`selector`	`undefined`	The container for the script. You can pass a `selector` or `element` into this value. When `undefined`, it defaults to `document.body`.
`options`		Optional `options` object

Options

Below are the options available to Sticky.

Option	Default	Description
`observerTimeout`	`1000`	The amount of time to watch the DOM for elements with `Sticky-check`. To disable the watching behaviour, set this to `0`

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Sticky

Sticky made easy

Reposition your sticky element

Sticky on the Bottom, Left, and Right too

Checking if elements are sticking is pretty easy

Basic Usage

How Sticky Works

Troubleshooting Sticky

Sticky entire sidebar

Sticky element in sidebar

Adjusting Sticky Position

Vertical Repositioning

Horizontal Repositioning

Sticky and Padding

Changing z-index

Checking if a Sticky element is sticking

Styling items that are sticking

Sticking Observer Timeout

Async sticky elements

Using Sticky in a table

Please login to view this content

Basic Usage

How Sticky Works

Troubleshooting Sticky

Sticky entire sidebar

Sticky element in sidebar

Adjusting Sticky Position

Vertical Repositioning

Horizontal Repositioning

Sticky and Padding

Changing z-index

Checking if a Sticky element is sticking

Styling items that are sticking

Sticking Observer Timeout

Async sticky elements

Using Sticky in a table

Please login to view this content

Sticky

Properties

CSS Variables

Sticky script

Options

Please login to view this content

Sticky

Properties

CSS Variables

Sticky script

Options