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

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

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

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

Sticky Content

Based on the version from MDB (https://mdbootstrap.com/javascript/stickycontent/). A demo can be seen here.

Using the sticky content elements in HTML

To use the sticky content you should use a stopper, that tells the sticky content to not be sticky anymore.

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