Preview Purchase
Navigation

Tailwind CSS Sticky

Tailwind CSS 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.

Basic Sticky

Enables the below navigation panel to remain sticky on during the page scrolling.
Preview HTML

Release

Enables the below navigation panel to remain sticky during page scrolling and releases the sticky mode once a specific element is reached.
Preview HTML

Source Code

The following source file manages the CSS styles of the Tailwind CSS Sticky component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/css/styles.css bundle, making it available globally across all pages.
File Description
src/core/plugins/components/sticky.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Sticky component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Sticky component. 
				
					<div data-sticky-wrapper="true">
 <div class="sticky-active:fixed sticky-active:z-10 sticky-active:shadow-lg" data-sticky="true" data-sticky-activate="#activate_element_id" data-sticky-left="auto" data-sticky-name="example" data-sticky-offset="100" data-sticky-release="#release_element_id" data-sticky-top="100">
  ....
 </div>
</div>

Variants

Utilize the following Tailwind CSS Sticky variants to manage the appearance of the sticky items and their child elements. For more information, refer to the Tailwind CSS Variant documentation .
Class Description
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. 
				
					<div data-sticky-wrapper="true">
 <div class="sticky-active:fixed sticky-active:z-10 sticky-active:shadow-lg" data-sticky="true" data-sticky-activate="#activate_element_id" data-sticky-left="auto" data-sticky-name="example" data-sticky-offset="100" data-sticky-release="#release_element_id" data-sticky-top="100">
  ....
 </div>
</div>

Data Attribute Initialization

Auto-initialize all KTSticky instances on page load by adding the data-sticky="true" attribute to your sticky element. This triggers on the fly initialization by the KTSticky JavaScript component. 
				
					<div data-sticky-wrapper="true">
 <div data-sticky="true" data-sticky-activate="#activate_element_id" data-sticky-class="fixed z-10 shadow-lg" data-sticky-left="auto" data-sticky-name="example" data-sticky-offset="100" data-sticky-release="#release_element_id" data-sticky-top="100" id="my_sticky">
  ....
 </div>
</div>
These attributes allow you to set options for the KTSticky component during initialization. The values you provide as strings are automatically converted to the appropriate KTSticky Options .
HTML Attribute Type Default Description
data-sticky boolean true Automatically initializes Tailwind CSS Sticky instances on page load. This can be disabled for manual initialization via JavaScript.
data-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-sticky-example="on" is added to the body during activation.
data-sticky-activate string - Selector ID of the element to detect in the viewport to deactivate sticky mode.
data-sticky-release string - Selector ID of the element to detect in the viewport to activate sticky mode.
data-sticky-class string - A list of classes added to the element upon activation of sticky mode.
data-sticky-top string - CSS value in pixels to apply for the sticky element’s top position when activated.
data-sticky-left 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-sticky-right 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-sticky-width
enum
"auto" : "value in pixel" : "id selector"
true CSS value in pixels, auto, or an ID selector to calculate the width of the element during activation.
data-sticky-zindex string 5 Specifies the z-index property of the sticky element, determining its stack order in the context of the page layout.
data-sticky-offset number 0 Sets the offset distance in pixels that the sticky element should activate from the top of the viewport.
data-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.

JavaScript Initialization

To initialize a new sticky component, pass the corresponding DOM element and configuration options to the KTSticky class constructor.
JavaScript HTML 
				
					const stickyEl = document.querySelector('#my_sticky');
const options = {
	name: 'default',
	class: 'sticky shadow-lg',
	top: '200px',
	left: 'auto',
	width: 'auto',
	zindex: '5',
	offset: 100,
	reverse: false,
	activate: '#activate_element_id',
	release: '#release_element_id'
};

const sticky = new KTSticky(stickyEl, options);

To initialize the sticky with JavaScript, use data-sticky="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Sticky instances, using the KTSticky JavaScript component.
Property Type Default Description
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-sticky-example="on" is added to the body during activation.
activate string - Selector ID of the element to detect in the viewport to deactivate sticky mode.
release string - Selector ID of the element to detect in the viewport to activate sticky mode.
class string - A list of classes added to the element upon activation of sticky mode.
top string - CSS value in pixels to apply for the sticky element’s top position when activated.
left 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.
right 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.
width
enum
"auto" : "value in pixel" : "id selector"
true CSS value in pixels, auto, or an ID selector to calculate the width of the element during activation.
zindex string 5 Specifies the z-index property of the sticky element, determining its stack order in the context of the page layout.
offset number 0 Sets the offset distance in pixels that the sticky element should activate from the top of the viewport.
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.

Utilities

Manage and interact with KTSticky instances using these static methods of KTSticky class.
Method Description
init() Automatically initializes KTSticky object for all elements with the data-sticky="true" 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.
JavaScript HTML 
				
					// Initialize all stickys
KTSticky.init()

// Initialzie pending stickys
KTSticky.createInstances();

// Get sticky object
const stickyEl = document.querySelector('#my_sticky');
const sticky = KTSticky.getInstance(stickyEl);

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 .
update() Refreshes and recalculates the sticky positioning of elements managed by KTSticky. This is essential after any layout changes that affect the dimensions or positioning of sticky elements, ensuring they function correctly in their sticky behavior.
isActive() Checks whether the sticky state is currently applied to the targeted element(s). Returns true if the element is sticky (fixed on the screen during scroll), and false if it is not, allowing for conditional operations based on the sticky state.
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.
JavaScript HTML 
				
					const stickyEl = document.querySelector('#my_sticky');
const sticky = KTSticky.getInstance(stickyEl);

sticky.update();
const isActive = sticky.isActive();

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
change This event is triggered before a sticky mode is activated or deactivated on an element. 
				
					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');
	}	
});
Previous Stepper Next Tabs