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
Edit in sandbox 
        
            
              <a
                type="button"
                href="https://mdbootstrap.com/docs/standard/getting-started/installation/"
                class="btn btn-outline-primary sticky"
                data-mdb-sticky-init
                data-mdb-ripple-init
              >
                Download MDB
              </a>
            
        
    
        
            
              // Initialization for ES Users
              import { Ripple, Sticky, initMDB } from "mdb-ui-kit";
              
              initMDB({ Ripple, Sticky });

Sticky bottom

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

Edit in sandbox 
        
            
              <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-init
                data-mdb-sticky-position="bottom"
              />
            
        
    
        
            
              // Initialization for ES Users
              import { Sticky, initMDB } from "mdb-ui-kit";
              
              initMDB({ Sticky });

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.

Edit in sandbox 
        
            
              <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-init
                  data-mdb-sticky-boundary="true"
                />
              </div>
            
        
    
        
            
              // Initialization for ES Users
              import { Sticky, initMDB } from "mdb-ui-kit";
              
              initMDB({ Sticky });

Outer element as a boundary

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

Stop here
Edit in sandbox 
        
            
              <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-init
                    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>
            
        
    
        
            
              // Initialization for ES Users
              import { Sticky, initMDB } from "mdb-ui-kit";
              
              initMDB({ Sticky });

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
Edit in sandbox 
        
            
              <a type="button" class="btn btn-primary sticky" data-mdb-ripple-init data-mdb-sticky-init data-mdb-sticky-boundary="true" data-mdb-sticky-direction="up">Up</a>
              <a type="button" class="btn btn-primary sticky" data-mdb-ripple-init data-mdb-sticky-init data-mdb-sticky-boundary="true" data-mdb-sticky-direction="down">Down</a>
              <a type="button" class="btn btn-primary sticky" data-mdb-ripple-init data-mdb-sticky-init data-mdb-sticky-boundary="true" data-mdb-sticky-direction="both">Both</a>
            
        
    
        
            
              // Initialization for ES Users
              import { Ripple, Sticky, initMDB } from "mdb-ui-kit";
              
              initMDB({ Ripple, Sticky });

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.

Edit in sandbox 
        
            
              <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-init
                data-mdb-sticky-animation-sticky="slide-in-down"
                data-mdb-sticky-animation-unsticky="slide-up"
                data-mdb-sticky-boundary="true"
              />
            
        
    
        
            
              // Initialization for ES Users
              import { Sticky, initMDB } from "mdb-ui-kit";
              
              initMDB({ 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.

Edit in sandbox 
        
            
              <nav class="navbar sticky-top bg-body-tertiary 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-init
                data-mdb-sticky-boundary="true"
                data-mdb-sticky-direction="both"
                data-mdb-sticky-offset="75"
                data-mdb-sticky-delay="75"
              />
            
        
    
        
            
              // Initialization for ES Users
              import { Sticky, initMDB } from "mdb-ui-kit";
              
              initMDB({ Sticky });

Sticky - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
        
            
            import { Sticky, initMDB } from "mdb-ui-kit";
            initMDB({ Sticky });
          
        
    
        
            
            import 'mdb-ui-kit';

Usage

Via data attributes

Using the Datatable sticky doesn't require any additional JavaScript code - simply add data-mdb-Sticky-init attribute to .sticky and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
        
            
          <p class="sticky" data-mdb-sticky-init>Example</p>

Via JavaScript

Edit in sandbox 
        
            
            const sticky = document.querySelector('.sticky');
            const stickyInstance = new Sticky(sticky);
          
        
    
        
            
            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.

Edit in sandbox 
        
            
        $(document).ready(() => {
          $('.sticky').sticky();
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-sticky-delay="50".

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
dispose Removes mdb.Sticky instance. sticky.dispose()
activate Start sticky manually. sticky.activate()
deactivate Stop sticky manually. sticky.deactivate()
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)
Edit in sandbox 
        
            
            const myStickyEl = document.getElementById('sticky');
            const sticky = new Sticky(myStickyEl);
            sticky.deactivate();
          
        
    
        
            
            const myStickyEl = document.getElementById('sticky') 
            const sticky = new mdb.Sticky(myStickyEl)
            sticky.deactivate();

Events

Name Description
activated.mdb.sticky This event is emitted after elements is sticked to the edge of a specific area.
deactivated.mdb.sticky This event is emitted when elements detach from the edge of a specific area.
Edit in sandbox 
        
            
        const myStickyEl = document.getElementById('sticky') 
        myStickyEl.addEventListener('activated.mdb.sticky', (e) => {
          // do something...
        })