Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

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

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 a following script to set a 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 zIndex option if you need to use multiple sticky elements while scrolling the page.