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

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 MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

To start use sticky just add a .sticky class and data-mdb-sticky-init attribute to the element you want to pin.

Download MDB
Show code

Sticky bottom

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

Show code

Boundary

Set data-mdb-sticky-boundary="true" so that sticky only works inside the parent element. Be sure to set the appropriate height for the parent.

Show code

Outer element as a boundary

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

Stop here
Show code

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
Show code

Animation

You can incorporate an animation that activates when the sticky behavior starts and when the sticky element is hidden. Specify the CSS class for 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.

Show code

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.

Show code