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>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:
For example: 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.
{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
kt_docs_content_container
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.
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:
For example: 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.
{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:
For example: 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.
{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:
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).
|
getInstance (DOMElement element)
|
Get the Sticky instance created
|
| Public Methods | |
update
|
Forces the sticky component to update with any modifications done.
|
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.
|
kt.sticky.off
|
This event fires on when sticky is disnabled from a sticky state to a regular state.
|
kt.sticky.change
|
This event fires on when sticky is changed from either a regular state to a sticky state or vice versa.
|
Basic Example
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 |
2024©
Keenthemes
