Sticky is a component which allows elements to be locked in a particular area of the page. It is often used in navigation menus.
Required ES init:
Sticky *
* UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using TW
Elements ES format then you should pass
the required components to the
initTWE method.
Basic example
To start use sticky just add a data-twe-sticky-init attribute
to the element you want to pin.
// Initialization for ES Users
import {
Sticky,
initTWE,
} from "tw-elements";
initTWE({ Sticky });
Hey there 👋 we're excited about TW elements and want to
see it grow! If you enjoy it,
help the project grow by sharing it with your peers.
Every share counts, thank you!
Sticky bottom
You can pin element to bottom by adding
data-twe-sticky-position="bottom".
// Initialization for ES Users
import {
Sticky,
initTWE,
} from "tw-elements";
initTWE({ Sticky });
Animation
You can add an animation that will run when the sticky starts and when the
sticky element is hidden. just specify the css class of the animation using
the data-twe-sticky-animation-sticky and
data-twe-sticky-animation-unsticky
attributes.
// Initialization for ES Users
import {
Sticky,
initTWE,
} from "tw-elements";
initTWE({ Sticky });
Sticky with navbar
By default, sticky locks the element at the edge of the screen. If you have
a navbar element on your website, it will hide behind it. You can prevent
this by setting an offset and delay. You can also
change z-index of the sticky element by setting
data-twe-sticky-z-index attribute.
Importing components depends on how your application works. If you intend
to use the TW elements ES format, you must first import the
component and then initialize it with the initTWE method. If
you are going to use the UMD format, just import the
tw-elements package.
import { Sticky, initTWE } from "tw-elements";
initTWE({ Sticky });
import "tw-elements";
Usage
Via data attributes
Simply add data-twe-sticky-init attribute to the element to
initialize the Sticky component. For ES format, you must
first import and call the initTWE method.
const mySticky = new Sticky(document.getElementById('example'), options, classes);
const mySticky = new twe.Sticky(document.getElementById('example'), options, classes);
Options
Options can be passed via data attributes or JavaScript. For data
attributes, append the option name to data-twe-, as in
data-twe-sticky-direction="down".
Name
Type
Default
Description
stickyAnimationSticky
String
-
Set sticky animation. You have to pass the valid animation
class like animate-[fade-in_1s_ease-in-out]
stickyAnimationUnsticky
String
-
Set unsticky animation You have to pass the valid animation
class like animate-[fade-out_1s_ease-in-out]
stickyBoundary
Boolean
false
Set to true to stop sticky on the end of the
parent.
stickyDelay
Number
0
Set the number of pixels beyond which the item will be
pinned.
stickyDirection
String
"down"
Set the scrolling direction for which the element is to be
sticky.
stickyMedia
Number
0
Set the minimum width in pixels for which the sticky should
work.
stickyOffset
Number
0
Set the distance from the top edge of the element for which
the element is sticky.
stickyPosition
String
'top'
Set the edge of the screen the item should stick to.
Classes
Custom classes can be passed via data attributes or JavaScript. For data
attributes, append the class name to
data-twe-class, as in
data-twe-class-sticky-active="".
Name
Default
Description
stickyActive
-
Set the class to be added when the sticky element is active.
Methods
Method
Description
Example
active
Start sticky manually.
mySticky.active()
inactive
Stop sticky manually.
mySticky.active()
dispose
Manually deletes an instance of sticky.
mySticky.dispose()
getInstance
Static method which allows you to get the Sticky instance
associated to a DOM element.
Sticky.getInstance(mySticky)
getOrCreateInstance
Static method which returns the Sticky instance associated
to a DOM element or create a new one in case it wasn't
initialized.
