Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Sticky Content 

<div class="widget sticky z-depth-1" id="header">
    <h5 class="title">Sticky Widget</h5>
    <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>

<!-- This element is only used for demo purpose -->
<div class="spacer"></div>

<div class="sidebar">
    <div class="widget sticky z-depth-1" id="sidebar">
        <h5 class="title">Sticky Widget</h5>
        <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>
        <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>
</div>

<!-- This element is only used for demo purpose -->
<div class="spacer"></div>

<!-- This element is only used for demo purpose -->
<div id="footer">
    <h2>Stop point</h2>
</div>

Sticky Content

Based on the version from MDB:
https://mdbootstrap.com/javascript/stickycontent/

Aside from this version, an MDB demo can be seen here with some more layout and content.

Using

To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.

The stopper is an element which stops the Sticky Content.

    $(".sticky").sticky({
        topSpacing: 90,
        zIndex: 2,
        stopper: "#YourStopperId"
    });

Notes

The component may be used with every heading (H1 - H6) level, so you are free to use which heading level suits your use-case.