Documentation v1.1.5

Preview

Overview

Sticky is an exclusive plugin of Craft 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 div wrapper (in this example, our wrapper element is a .card), please refer to the markup reference below 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>

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.
kt_docs_content_container
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.
To use width from other element just pass a JSON value with element selector: data-kt-sticky-width="{target: '#reference_element_id'}"
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
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");
});
Product details
Basic Bundle $149.99 / Year
Payment Details
Mastercard
Expires Dec 2024
Subscription Details
Subscription ID: sub_4567_8765
Started: 15 Apr 2021
Status: Active
Next Invoice: 15 Apr 2022
Preview Get Help Buy Now