Bootstrap affix (sticky content)

Bootstrap affix

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Bootstrap sticky content (affix) is a plugin which allows elements to be locked in a particular area of the page. It is often used in navigation menus.

Click on the button below to see an example of StickyContent.

Note: The original Bootstrap Affix plugin has been dropped. MDB provides you an alternative e — the Sticky Content plugin.

Usage

Step 1: Add a class .sticky to the chosen element.

        
            

        <div class="sticky">
          <h2>Sticky Element</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin
            turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
        </div>

      
        
    

Step 2: Use the following script to set the desired values.

The stopper is an element which stop the StickyContent.

        
            
        $(function () {
          $(".sticky").sticky({
            topSpacing: 90,
            zIndex: 2,
            stopper: "#YourStopperId"
          });
        });

      
        
    

Note: If no stopper id or class is provided, by default script uses 'sticky-stopper'. You can also use number values for pixel points on the y-axis.

Tip: Use the zIndex option if you need to use multiple sticky elements while scrolling the page.

Change class

        
            

      $(".navbar").sticky({
        ...
        stickyClass: ['navbar-dark', 'mdb-color'],
        ...
      });

    
        
    

Hide on mobile

The sticky element should be used on small screens. To hide the sticky element you can use the minWidth option:

        
            

      $(function () {
        $(".sticky").sticky({
          ...
          minWidth: 768,
          ...
        });
      });

    
        
    

Options