Bootstrap affix (sticky content)

Bootstrap affix

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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