Tailwind Sticky component allows elements to remain fixed within their parent container as you scroll. This feature enhances user experience by keeping important content, such as navigation menus or headers, in view even when the page is scrolled.
Enables the below navigation panel to remain sticky on during the page scrolling.
Enables the below navigation panel to remain sticky during page scrolling and releases the sticky mode once a specific element is reached.
These data attributes allow you to set options for the sticky component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-sticky-name | string | - | When activated, this name is used to apply a specific data attribute to the body tag. For example, if set to “example”, data-kt-sticky-example="on" is added to the body during activation. |
data-kt-sticky-activate | string | - | Selector ID of the element to detect in the viewport to deactivate sticky mode. |
data-kt-sticky-release | string | - | Selector ID of the element to detect in the viewport to activate sticky mode. |
data-kt-sticky-class | string | - | A list of classes added to the element upon activation of sticky mode. |
data-kt-sticky-top | string | - | CSS value in pixels to apply for the sticky element’s top position when activated. |
data-kt-sticky-start | string | - | CSS value in pixels to apply for the sticky element’s left position when activated. When set to auto, the value is calculated as the element’s offsetLeft. |
data-kt-sticky-end | string | - | CSS value in pixels to apply for the sticky element’s right position when activated. When set to auto, the value is calculated as the offset from the right of the container or viewport. |
data-kt-sticky-zindex | enum | true | CSS value in pixels, auto, or an ID selector to calculate the width of the element during activation. |
data-kt-sticky-offset | string | 5 | Specifies the z-index property of the sticky element, determining its stack order in the context of the page layout. |
data-kt-sticky-reverse | number | 0 | Sets the offset distance in pixels that the sticky element should activate from the top of the viewport. |
data-kt-sticky-reverse | boolean | false | Determines whether the sticky effect should activate in the opposite direction of the scroll, typically used for elements that should become sticky upon scrolling upwards. |
This table details the custom classes and data attributes used by the sticky component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-sticky | Automatically initializes Tailwind Sticky instances on page load. |
| Classes | |
active | Sets a specific sticky item to be open initially when used togather with data-kt-sticky-item selector. |
hidden | Sets a specific sticky content to be hidden initially when used togather with data-kt-sticky-item selector. |
Custom modifiers to control the sticky’s style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-sticky-active:* | A custom Tailwind variant activated when the sticky mode is activate. It can be applied to the sticky and its children, controlling their appearance and behavior in the open state. |
Use KTSticky component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTSticky(element, options) | Creates an object instance of KTSticky class for the given DOM element and configuration options . |
show(element) | Shows the sticky section that corresponds to the given DOM element . |
hide(element) | Hides the sticky section that corresponds to the given DOM element . |
toggle(element) | Toggles the sticky section that corresponds to the given DOM element . |
getOption(name) | Retrieves the value of a configuration option by name parameter from a KTSticky instance. |
getElement() | Retrieves the DOM element linked to a specific KTSticky instance. |
on(eventName, handler) | Allows attaching event listeners to the KTSticky custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTSticky. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed. |
off(eventName, eventId) | Removes an event listener for the eventName and eventId parameters attached with the on method. |
dispose() | Removes the KTSticky instance from an element, including any associated data stored on the DOM element. |
const stickyEl = document.querySelector('#my_sticky');
const sticky = KTSticky.getInstance(stickyEl);
sticky.update();
const isActive = sticky.isActive();Manage and interact with KTSticky instances using these static methods of KTSticky JavaScript class.
| Name | Description |
|---|---|
init() | Automatically initializes KTSticky object for all elements with the data-kt-sticky attribute on page load. |
createInstances() | Allows to create KTSticky instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the KTSticky object associated with the given DOM element element. |
getOrCreateInstance(element) | Returns the existing KTSticky object for the provided DOM element element , or creates a new instance if none exists, then returns the same. |
// Initialize all stickys
KTSticky.init()
// Initialzie pending stickys
KTSticky.createInstances();
// Get sticky object
const stickyEl = document.querySelector('#my_sticky');
const sticky = KTSticky.getInstance(stickyEl);KTSticky custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
show | Triggered immediately before an sticky section is shown. |
shown | Triggered immediately after an sticky section is shown. |
hide | Triggered immediately before an sticky section is hidden. |
hiden | Triggered immediately after an sticky section is hidden. |
toggle | Triggered immediately before an sticky section is toggled(shown/hidden). |
const stickyEl = document.querySelector('#my_sticky');
const sticky = KTSticky.getInstance(stickyEl);
sticky.on('change', (detail) => {
if (detail.active) {
console.log('sticky mode is active');
} else {
console.log('sticky mode is not active');
}
});