Sticky

Bootstrap 5 Sticky

Sticky is a component which allows elements to be locked in a particular area of the page. It is often used in navigation menus.

Note: Read the API tab to find all available options and advanced customization

Basic example

To start use sticky just add a .sticky class to the element you want to pin

Download MDB

Sticky bottom

You can pin element to bottom by adding data-mdb-sticky-position="bottom"

Boundary

Set data-mdb-sticky-boundary="true" so that sticky only works inside the parent element. Remember to set the correct parent height.

Outer element as a boundary

You can specify an element selector to be the sticky boundary.

Stop here

Direction

Default direction of sticky component is down. You can change it by setting data-mdb-sticky-direction="up" or data-mdb-sticky-direction="both"

Up Down Both

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-mdb-sticky-animation-sticky and data-mdb-sticky-animation-unsticky attributes.

Remember that not every animation will be appropriate. We suggest using the animations used in the example below.

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

Sticky - API

Usage

Via CSS class

HTML


        <p class="sticky">Example</p>

Via JavaScript

JavaScript


        const sticky = document.querySelector('.sticky');
        const stickyInstance = new mdb.Sticky(sticky);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

jQuery


        $('.sticky').sticky();

Options

Name	Type	Default	Description
`stickyActiveClass`	String	`''`	Set custom active class
`stickyAnimationSticky`	String	`''`	Set sticky animation
`stickyAnimationUnsticky`	String	`''`	Set unsticky animation
`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 stikcky
`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

Methods

Name	Description	Example
`active`	start sticky manually	`sticky.active()`
`inactive`	stop sticky manually	`sticky.inactive()`
`getInstance`	Static method which allows you to get the sticky instance associated to a DOM element.	`Sticky.getInstance(myStickyEl)`

JavaScript


        const myStickyEl = document.getElementById('sticky') 
        const sticky = new mdb.Sticky(myStickyEl)
        sticky.inactive();

Events

Name	Description
`active.mdb.sticky`	This event fires immediately when sticky start
`inactive.mdb.sticky`	This event fires immediately when sticky stop

JavaScript


        const myStickyEl = document.getElementById('sticky') 
        myStickyEl.addEventListener('active.mdb.sticky', (e) => {
          // do something...
        })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

JavaScript


        import { Sticky } from 'mdb-ui-kit';