Documentation v8.0.28

Preview Purchase

Overview

Sticky is an exclusive plugin of Metronic that provides a simple, smooth and lightweight for initializing sticky components without any Javascript.

Usage

Sticky's script bundles are globally included and initialized in all pages.

<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>

Initialization

Sticky's Javascript is globally initialized and added into our script bundle.
Add data-kt-sticky="true"to a HTML element to enable it. There are multiple additional HTML attributes you can include to configure Sticky directly.
Sticky is a wrapping element, therefore, by itself it doesn't do much. However, adding multiple HTML components into sticky's container will allow all contained HTML components to be sticky on browser scroll.
Sticky instances can also be controlled programmatically. See below for more info.

Basic Example

The example sticky component is previewed on the right side of the screen. There are a variety HTML attributes added in the divwrapper (in this example, our wrapper element is a .card), please refer to the markup referencebelow to view what each of them do.

A sticky component is a simple wrapper element. Anything that gets added into a sticky component will also be sticky.

<div class="card card-flush bg-light mb-0"
    data-kt-sticky="true"
    data-kt-sticky-name="docs-sticky-summary"
    data-kt-sticky-offset="{default: false, xl: '200px'}"
    data-kt-sticky-width="{lg: '250px', xl: '300px'}"
    data-kt-sticky-left="auto"
    data-kt-sticky-top="100px"
    data-kt-sticky-animation="false"
    data-kt-sticky-zindex="95"
>
    ...
</div>

Example Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel fringilla est ullamcorper eget nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sed faucibus turpis in eu mi. Velit egestas dui id ornare arcu odio. Arcu non odio euismod lacinia at quis risus sed vulputate. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vehicula ipsum a arcu cursus. Gravida neque convallis a cras semper. Amet massa vitae tortor condimentum. Lectus mauris ultrices eros in cursus turpis massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui. Vestibulum morbi blandit cursus risus at ultrices.

Quis ipsum suspendisse ultrices gravida dictum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Eget arcu dictum varius duis at consectetur lorem donec massa. Morbi tincidunt ornare massa eget. Ornare arcu dui vivamus arcu felis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Aliquet nec ullamcorper sit amet. Dignissim enim sit amet venenatis urna cursus eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Non consectetur a erat nam at. Ut morbi tincidunt augue interdum velit. Ridiculus mus mauris vitae ultricies leo integer malesuada.

Ipsum dolor sit amet consectetur adipiscing. Blandit cursus risus at ultrices mi tempus imperdiet. Risus nullam eget felis eget. A lacus vestibulum sed arcu non. Tristique magna sit amet purus gravida quis blandit turpis cursus. Imperdiet nulla malesuada pellentesque elit. Nec dui nunc mattis enim ut tellus elementum sagittis. Ac placerat vestibulum lectus mauris. Facilisi etiam dignissim diam quis enim. Suspendisse faucibus interdum posuere lorem ipsum dolor. Mattis rhoncus urna neque viverra justo nec ultrices. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. At varius vel pharetra vel turpis nunc eget. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Ut morbi tincidunt augue interdum velit euismod in.

Etiam tempor orci eu lobortis elementum nibh. Libero volutpat sed cras ornare arcu. Risus sed vulputate odio ut enim. Iaculis nunc sed augue lacus viverra vitae. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Ullamcorper a lacus vestibulum sed arcu. In dictum non consectetur a erat. Varius quam quisque id diam vel quam elementum. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Sed viverra tellus in hac habitasse platea dictumst. Amet cursus sit amet dictum sit amet. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Non tellus orci ac auctor augue mauris.

Ut lectus arcu bibendum at varius vel. Arcu felis bibendum ut tristique et egestas quis. Sit amet commodo nulla facilisi nullam vehicula ipsum. Tellus cras adipiscing enim eu turpis egestas pretium. Imperdiet massa tincidunt nunc pulvinar sapien et. Integer eget aliquet nibh praesent tristique magna sit. Lacinia at quis risus sed vulputate odio ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Aenean pharetra magna ac placerat vestibulum. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra nam libero justo laoreet sit amet cursus sit amet. Diam vel quam elementum pulvinar. Massa vitae tortor condimentum lacinia quis vel eros donec ac.

Markup Reference

Sticky uses HTML attributes to define the certain configurations. Here are the references for each below

HTML Attribute references

Name	Type	Description
`data-kt-sticky`	`mandatory`	Defines the element as a drawer view component. Accepts `true`or `false`values.
`data-kt-sticky-name`	`optional`	Defines the sticky component's name for identification and used to append a special attribute to Body element to indicate the sticky's on scroll state.
`data-kt-sticky-offset`	`optional`	Specifies the sticky component's offset value from the top for when it toggles from a regular state to a sticky state. Accepts `px`value. For example: `50px`. This is also compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with a similar `px`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default:'30px', 'md': '50px'}`indicates that the sticky component will stick on screen when `50px`from the top is scrolled on screens larger than `md`and `30px`form the top for every other screen size.
`data-kt-sticky-reverse`	`optional`	Resets the sticky element back to it's original state when user starts rever scrolling. Accepts `true`or `false`values. Default value is set too `false`.
`data-kt-sticky-width`	`mandatory`	Specifies the sticky component's width in a `px`value. For example: `400px`. This is also compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with a similar `px`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default:'300px', 'md': '500px'}`indicates that the sticky component has `500px`width on screens larger than `md`and `300px`for every other screen size.
`data-kt-sticky-left`	`optional`	Specifies the sticky component's left position from the parent container in either a `px`value or `auto`. For example: `100px`. This is also compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with a similar `px`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default:'auto', 'md': '50px'}`indicates that the sticky component has a left position of `50px`on screens larger than `md`and is `auto`for every other screen size.
`data-kt-sticky-top`	`optional`	Specifies the sticky component's top position from the parent container in either a `px`value or `auto`. For example: `100px`. This is also compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with a similar `px`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default:'auto', 'md': '50px'}`indicates that the sticky component has a top position of `50px`on screens larger than `md`and is `auto`for every other screen size.
`data-kt-sticky-animation`	`optional`	Toggles the sticky component's animation introduction. Suitable to be enabled when the sticky component is required to slide into position when transitioning from a regular state to a sticky state.
`data-kt-sticky-zindex`	`optional`	Toggles the sticky component's `z-index`value. Accepts a `number`value.

Methods

All sticky components are initialized automatically, however the following are Sticky's functionality methods for more control.

Name	Description
Static Methods
`KTSticky(DOMElement element)`	Constructs a new instance of `KTSticky`class and initializes a Sticky control: `var stickyElement = document.querySelector("#kt_sticky_control"); var sticky = new KTSticky(stickyElement);` Remove `data-kt-sticky="true"`attribute to avoid lazy initialization.
`createInstances(DOMString selector)`	Initializes Sticky instances by selector. Default value of `selector`is `[data-kt-sticky="true"]`. This method can be used to initialize dynamicly populated Sticky instances(e.g: after Ajax request). `KTSticky.createInstances();`
`getInstance(DOMElement element)`	Get the Sticky instance created `var stickyElement = document.querySelector("#kt_sticky_example_1"); var sticky = KTSticky.getInstance(stickyElement);`
Public Methods
`update`	Forces the sticky component to update with any modifications done. `sticky.update();`

Events

Below are few events for hooking into the Sticky functionality.

Event Type Description

Event Type	Description
`kt.sticky.on`	This event fires on when sticky is enabled from a regular state to a sticky state. `var stickyElement = document.querySelector("#kt_sticky_example_1"); var sticky = KTSticky.getInstance(stickyElement); sticky.on("kt.sticky.on", function() { // console.log("kt.sticky.on event is fired"); });`
`kt.sticky.off`	This event fires on when sticky is disnabled from a sticky state to a regular state. `var stickyElement = document.querySelector("#kt_sticky_example_1"); var sticky = KTSticky.getInstance(stickyElement); sticky.on("kt.sticky.off", function() { // console.log("kt.sticky.off event is fired"); });`
`kt.sticky.change`	This event fires on when sticky is changed from either a regular state to a sticky state or vice versa. `var stickyElement = document.querySelector("#kt_sticky_example_1"); var sticky = KTSticky.getInstance(stickyElement); sticky.on("kt.sticky.change", function() { // console.log("kt.sticky.change event is fired"); });`

kt.sticky.on

This event fires on when sticky is enabled from a regular state to a sticky state.

var stickyElement = document.querySelector("#kt_sticky_example_1");
var sticky = KTSticky.getInstance(stickyElement);
sticky.on("kt.sticky.on", function() {
    // console.log("kt.sticky.on event is fired");
});

kt.sticky.off

This event fires on when sticky is disnabled from a sticky state to a regular state.

var stickyElement = document.querySelector("#kt_sticky_example_1");
var sticky = KTSticky.getInstance(stickyElement);
sticky.on("kt.sticky.off", function() {
    // console.log("kt.sticky.off event is fired");
});

kt.sticky.change

This event fires on when sticky is changed from either a regular state to a sticky state or vice versa.

var stickyElement = document.querySelector("#kt_sticky_example_1");
var sticky = KTSticky.getInstance(stickyElement);
sticky.on("kt.sticky.change", function() {
    // console.log("kt.sticky.change event is fired");
});