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>
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
trueor
falsevalues. |
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
pxvalue. For example:
50px.This is also compatible with Bootstrap's standard breakpoint sizing (eg:
For example:
sm, md, lg, xl) with a similar
pxvalues. 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
50pxfrom the top is scrolled on screens larger than
mdand
30pxform 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
trueor
falsevalues. Default value is set too
false. |
data-kt-sticky-width
|
mandatory
|
Specifies the sticky component's width in a
kt_docs_content_container
pxvalue. For example:
400px.This is also compatible with Bootstrap's standard breakpoint sizing (eg:
sm, md, lg, xl) with a similar
pxvalues. 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
500pxwidth on screens larger than
mdand
300pxfor 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
pxvalue 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
pxvalues. 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
50pxon screens larger than
mdand is
autofor every other screen size. |
data-kt-sticky-top
|
optional
|
Specifies the sticky component's top position from the parent container in either a
pxvalue 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
pxvalues. 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
50pxon screens larger than
mdand is
autofor 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-indexvalue. Accepts a
numbervalue. |
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
KTStickyclass 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
selectoris
[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
