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'
| 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 |