<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>
														data-kt-sticky="true"to a HTML element to enable it. There are multiple additional HTML attributes you can include to configure Sticky directly.divwrapper (in this example, our wrapper element is a
													.card), please refer to the
													markup referencebelow to view what each of them do.
<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>
														| Name | Type | Description | 
|---|---|---|
| data-kt-sticky | mandatory | Defines the element as a drawer view component. Accepts trueorfalsevalues. | 
| 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 similarpxvalues. 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 when50pxfrom the top is scrolled on screens larger thanmdand30pxform 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 trueorfalsevalues. Default value is set toofalse. | 
| data-kt-sticky-width | mandatory | Specifies the sticky component's width in a
																	 pxvalue. For example:400px.This is also compatible with Bootstrap's standard breakpoint sizing (eg:
																	For example: sm, md, lg, xl) with a similarpxvalues. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.{default:'300px', 'md': '500px'}indicates that the sticky component has500pxwidth on screens larger thanmdand300pxfor every other screen size. | 
| data-kt-sticky-left | optional | Specifies the sticky component's left position from the parent container in either a
																	 pxvalue orauto. For example:100px.This is also compatible with Bootstrap's standard breakpoint sizing (eg:
																	For example: sm, md, lg, xl) with a similarpxvalues. 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 of50pxon screens larger thanmdand isautofor every other screen size. | 
| data-kt-sticky-top | optional | Specifies the sticky component's top position from the parent container in either a
																	 pxvalue orauto. For example:100px.This is also compatible with Bootstrap's standard breakpoint sizing (eg:
																	For example: sm, md, lg, xl) with a similarpxvalues. 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 of50pxon screens larger thanmdand isautofor 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 anumbervalue. | 
| 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. 
 | 
| 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. 
 | 
| Subscription ID: | sub_4567_8765 | 
| Started: | 15 Apr 2021 | 
| Status: | Active | 
| Next Invoice: | 15 Apr 2022 |