<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>
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.
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"
});The component may be used with every heading (H1 - H6) level, so you are free to use which heading level suits your use-case.