Sticky

Bootstrap 5 Sticky

Sticky is a directive 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 v-mdb-sticky directive to the element you want to pin

Download MDB
Show code

Sticky bottom

You can pin element to bottom by adding v-mdb-sticky="{ position: 'bottom' }"

Show code

Boundary

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

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 v-mdb-sticky="{ direction: 'up' }" or v-mdb-sticky="{ direction: 'both' }"

Up Down Both
Show code

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 v-mdb-sticky="{ animationSticky: 'animation-name' }" and v-mdb-sticky="{ animationUnsticky: 'animation-name' }".

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 v-mdb-sticky="{ offset: number }" or v-mdb-sticky="{ delay: number }"

Show code