Bootstrap affix (sticky content) MDB Pro component

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

Click the button below to see an example of StickyContent.

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

Sticky Content Example


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>

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

The stopper is an element which stop the StickyContent.

$(function () {
        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 zIndex option if you need to use multiple sticky elements while scrolling the page.