Bootstrap stickycontent Premium component

The StickyContent plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them "stick" to a specific area while scrolling up and down the page.

Click the button below to see an example of StickyContent.

StickyContent 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.

Introduction
Usage