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

Name Type Default Description
topSpacing number 0 Offsets the sticky element from the top by number of pixels.
zIndex number true Applies zIndex to the sticky element. It can be also set to false.
stopper string | number .sticky-stopper Stops the sticky element from scrolling. You can use class or ID of the stopper or the number of pixels on the y-axis.
stickyClass string | array false The class or list of classes that will be applied after the element becomes sticky.
startScrolling string top When it is set to bottom, the element can become sticky only after you scroll down to the bottom of the element.
minWidth number | boolean false Minimum screen width to make the sticky element work.