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
<a
type="button"
href="https://mdbootstrap.com/docs/jquery/getting-started/download/"
class="btn btn-outline-primary bg-white sticky"
>
Download MDB
</a>
Sticky bottom
You can pin element to bottom by adding
data-mdb-sticky-position="bottom"
<img
id="MDB-logo"
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
alt="MDB Logo"
class="sticky"
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.
<div style="min-height: 500px" class="text-center">
<img
id="MDB-logo"
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
alt="MDB Logo"
class="sticky"
data-mdb-sticky-boundary="true"
/>
</div>
Outer element as a boundary
You can specify an element selector to be the sticky boundary.
<div style="min-height: 500px" class="d-flex flex-column justify-content-center text-center">
<div>
<img
id="MDB-logo"
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
alt="MDB Logo"
class="sticky"
data-mdb-sticky-boundary="#sticky-stop"
data-mdb-sticky-direction="both"
/>
</div>
<div id="sticky-stop" class="mt-auto" style="height: 5rem">Stop here</div>
</div>
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"
<a type="button" class="btn btn-outline-primary bg-white" data-mdb-sticky-boundary="true" data-mdb-sticky-direction="up">Up</a>
<a type="button" class="btn btn-outline-primary bg-white" data-mdb-sticky-boundary="true" data-mdb-sticky-direction="down">Down</a>
<a type="button" class="btn btn-outline-primary bg-white" data-mdb-sticky-boundary="true" data-mdb-sticky-direction="both">Both</a>
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.
<img
id="MDB-logo"
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
alt="MDB Logo"
class="sticky"
data-mdb-sticky-animation-sticky="slide-in-down"
data-mdb-sticky-animation-unsticky="slide-up"
data-mdb-sticky-boundary="true"
/>
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
<nav class="navbar sticky-top navbar-light bg-light mb-3">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<img
id="MDB-logo"
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
alt="MDB Logo"
class="sticky"
data-mdb-sticky-boundary="true"
data-mdb-sticky-direction="both"
data-mdb-sticky-offset="75"
data-mdb-sticky-delay="75"
/>
Sticky - API
Usage
Via CSS class
<p class="sticky">Example</p>
Via 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.
$(document).ready(() => {
$('.sticky').sticky();
});
Options
Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append
the option name to data-mdb-, as in data-mdb-sticky-active-class="".
| 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)
|
getOrCreateInstance
|
Static method which returns the sticky instance associated to a DOM element or create a new one in case it wasn't initialized. |
Sticky.getOrCreateInstance(myStickyEl)
|
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 |
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:
import { Sticky } from 'mdb-ui-kit';