Angular Bootstrap affix (sticky content)
Angular affix - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Angular Bootstrap sticky content (affix) is a plugin that allows elements to be locked in the particular area of the page. It is 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 - the Sticky Content plugin.
Usage MDB Pro component
Live exampleStep 1: Add a mdbSticky directive to the chosen element.
<div id="header" mdbSticky>
<h2 class="h1" id="topH">Sticky Content demo</h2>
<h4>Scroll down to see the effect</h4>
</div>
Step 2: To make an element go after a specific component add stickyAfter="#element".
<div class="widget" mdbSticky stickyAfter="#header">
<h2>Sticky Widget</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>
Example Sticky Content code MDB Pro component
The code below presents, how to use Sticky Content feature to add two side sticky div's and a sticky header.
<div class="container">
<div id="wrapper">
<div id="header" class="color z-depth-1" mdbSticky>
<h2 class="h1" id="topH">Sticky Content demo</h2>
<h4>Scroll down to see the effect</h4>
</div>
<div id="main" class="row">
<div id="sidebar-lt" class="sidebar">
<div class="widget static">
<h2>Static Widget</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>
<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 class="widget color z-depth-1" mdbSticky stickyAfter="#header">
<h2>Sticky Widget</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>
<div class="widget static">
<h2>Static Widget</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>
<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>
<div id="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum lacus sed velit luctus
tempus. Ut bibendum gravida rutrum. Phasellus et ipsum id ante interdum laoreet. Vivamus pharetra
tortor sed libero interdum at volutpat arcu cursus. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Maecenas porta tempor ullamcorper. Curabitur quis elit
nisl. In tincidunt, purus eget commodo pretium, libero mauris egestas sem, in vestibulum sem lacus
ac odio. Donec pharetra tristique nulla, non scelerisque mauris auctor in. Sed elit mauris,
pellentesque sed iaculis id, condimentum eget sem. Maecenas at enim mi. Duis non nunc justo, vitae
tristique purus. Quisque sagittis convallis elementum.</p>
<p>Donec sed lectus tellus. Cras felis leo, imperdiet a interdum in, vestibulum eu quam. Donec elit
est, interdum eget mattis quis, semper ac est. Nam dignissim ultrices risus, a ornare justo
pretium vitae. Quisque vitae pellentesque mauris. Cras consectetur laoreet adipiscing. Morbi
placerat, elit et dapibus vestibulum, ipsum diam pellentesque metus, eu tincidunt tellus elit in
quam. Mauris quis accumsan urna. Proin commodo sapien volutpat lectus ultricies varius. Duis elit
enim, dapibus nec convallis id, egestas non neque. Sed a libero eu dolor ultrices ultricies a sit
amet nulla.</p>
<p>In hac habitasse platea dictumst. Nulla a velit dolor. Vestibulum in purus libero. Donec et orci
libero. Proin eget lacinia nisi. Proin eget pretium nisi. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse purus diam, adipiscing quis ultrices in, fringilla non neque. Integer
et lectus lectus, vel congue massa. Duis tincidunt ipsum non quam bibendum et lacinia purus
viverra. Etiam tortor est, volutpat vel ultricies a, aliquet et augue. Vivamus sed nulla enim, vel
egestas tortor.</p>
<p>Cras eu ipsum ac erat convallis gravida. Donec porta consequat odio, id pharetra augue volutpat
vitae. Etiam ut volutpat dui. Vestibulum eu risus leo. Ut quis nisl in magna gravida feugiat in
vel libero. Donec felis nunc, fermentum quis luctus elementum, vulputate quis turpis. Vestibulum
erat arcu, feugiat eu eleifend et, pretium et enim. Integer dignissim nunc ac velit pharetra quis
laoreet ipsum varius. Praesent dictum, elit tempus aliquam vulputate, lorem est euismod neque, sit
amet vulputate nisl turpis at magna. Maecenas felis ipsum, adipiscing ut mollis ut, feugiat vel
nunc. Morbi blandit, enim a faucibus cursus, mi nunc rutrum turpis, a dictum diam justo eget
ipsum. Vestibulum facilisis dolor sed elit faucibus nec ornare eros bibendum. Etiam enim odio,
ultricies vitae imperdiet vel, aliquam id ante. In hac habitasse platea dictumst. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus vitae fringilla sapien.</p>
<p>Sed consectetur ornare nisi eu lobortis. Curabitur nunc purus, vulputate vel blandit nec,
dignissim pharetra tortor. Nulla sagittis condimentum semper. Maecenas auctor hendrerit enim, quis
ultrices justo venenatis sagittis. Aliquam erat volutpat. In hac habitasse platea dictumst. Sed
sed ipsum lorem, eu tincidunt lacus. Suspendisse porttitor, elit sit amet placerat vestibulum,
urna urna convallis odio, nec accumsan urna nulla sit amet orci.</p>
<p>Sed in massa diam, et luctus neque. Morbi viverra turpis ut quam faucibus mattis quis sit amet
lorem. Vestibulum porta tellus at sem rhoncus pharetra. Aenean quis erat eu sem convallis
scelerisque cursus at lectus. Morbi ipsum turpis, consectetur et scelerisque quis, molestie sit
amet sem. Etiam mollis, quam pellentesque sagittis egestas, justo nibh gravida lacus, ac rhoncus
leo neque sed leo. Nunc consequat lacinia lorem, et blandit justo tempus non. Morbi quam turpis,
sodales non porttitor nec, fermentum vel risus. Praesent quam lacus, hendrerit a consectetur a,
viverra vitae enim. Morbi varius pulvinar mi, ut sodales eros mattis viverra. Nam condimentum,
ante nec varius posuere, turpis orci gravida nulla, eget cursus tellus libero sed risus.</p>
<p>Suspendisse pulvinar urna non libero viverra viverra. Pellentesque commodo sagittis mattis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla consequat nunc semper enim sodales accumsan aliquam justo luctus. Pellentesque quis leo at
mauris malesuada malesuada. Integer vel metus lectus. Duis lobortis, massa ac viverra dignissim,
ipsum magna auctor ante, et venenatis massa justo eget velit. Pellentesque vel leo ipsum, rhoncus
adipiscing lacus. Donec neque lacus, tempus id pulvinar et, fermentum vitae lectus. Pellentesque
aliquam velit sit amet libero ornare eu facilisis sem tristique. Nunc faucibus congue lorem, non
ultricies ligula faucibus non. Duis vehicula, est sit amet congue convallis, leo lorem posuere
eros, a feugiat felis nisl non turpis.</p>
<p>Donec arcu lectus, ullamcorper ut blandit sit amet, consequat eu quam. Fusce augue augue, blandit
non ornare nec, auctor in purus. Quisque nec turpis arcu. Phasellus hendrerit massa quis erat
pulvinar dapibus. Maecenas at elit et nulla tempor varius. Aenean consectetur elit ac ligula
dignissim aliquam. Praesent adipiscing metus bibendum libero malesuada porta. Suspendisse potenti.
Cras molestie mauris id orci lobortis congue. Phasellus accumsan placerat euismod. Vivamus non
viverra dolor. Ut tempus gravida elit, sed vehicula velit porttitor sit amet.</p>
</div>
<div id="sidebar-rt" class="sidebar">
<div class="widget static">
<h2>Static Widget</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>
<div class="widget color z-depth-1" mdbSticky stickyAfter="#header">
<h2>Sticky Widget</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>
<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 class="widget static">
<h2>Static Widget</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>
</div>
</div>
<div id="footer">
<h2>Stop Point</h2>
</div>
</div>
#wrapper {
width:960px;
height: 400px;
margin:0 auto;
#header {
border-bottom:1px solid #ccc;
padding:10px 20px;
width:920px;
z-index: 3;
}
#main {
overflow:hidden;
.sidebar {
float:left;
width:200px;
padding:0;
}
.sidebar .widget {
width:200px;
padding:10px 15px;
border-bottom:1px solid #ccc;
}
#article {
width:458px;
padding:0 20px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
float:left;
}
#sidebar-lt{
margin: 0 30px;
}
}
#footer {
height: 700px;
color: white;
text-align: center;
padding: 10px;
background-color: red;
}
.color {
background-color: blue;
color: white;
}
}
h1 {
margin:0;
}
h2 {
margin:0 0 0.5em;
}
Angular Sticky Content - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of sticky content directive.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
import { StickyContentModule, WavesModule } from 'ng-uikit-pro-standard'
Directives
MdbStickyDirective
Selector: mdbSticky
Type: MdbStickyDirective
Inputs
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
stickyAfter
|
string | - | CSS selector to be sticky after | stickyAfter="#header" |