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.
Examples
Basic Usage
Enables the below navigation panel to remain sticky on during the page scrolling.
Release
Enables the below navigation panel to remain sticky during page scrolling and releases the sticky mode once a specific element is reached.
Component API
Options
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
Selectors
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 selector.
Tailwind Modifiers
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.
Methods
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 .
To initialize Tailwind Collapse with JavaScript, use data-collapse="false"
attribute instead. This prevents automatic initialization on page load.
Utilities
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 .
// Initialize all stickysKTSticky.init();// Initialzie pending stickysKTSticky.createInstances();// Get sticky objectconst stickyEl = document.querySelector('#my_sticky');const sticky = KTSticky.getInstance(stickyEl);
Events
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.
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'); }});
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.
data-kt-sticky-item
hidden
Sets a specific sticky content to be hidden initially when used togather with data-kt-sticky-item selector.
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.
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.
hiden
Triggered immediately after an sticky section is hidden.
toggle
Triggered immediately before an sticky section is toggled(shown/hidden).
