xxxxxxxxxx1
<body aria-busy="true">2
3
<nav class="navbar text-white elegant-color-dark">4
<div class="mx-auto">Sticky Content - basic demo</div>5
</nav>6
7
<div class="container-fluid mt-3">8
<div class="row">9
<div class="col-4">10
11
<div class="example-static text-center mb-2">12
This is a <strong>static</strong> element13
</div>14
15
<div class="sticky-content text-center info-color text-white" style="position: static; width: auto; top: 50px; z-index: 2;">16
This is a <strong>sticky</strong> element17
</div>18
19
</div>20
<div class="col-8">21
<div class="example-content">22
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>23
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>24
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>25
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>26
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>27
</div>28
</div>29
</div>30
</div>31
32
<footer id="footer" class="grey lighten-4">33
<p class="stopper-text">Stop here</p>34
</footer>35
xxxxxxxxxx1
body {2
background: #fff;3
}4
5
.example-content {6
padding: 10px;7
font-size: 14px;8
border: 1px dashed #ccc;9
}10
11
.sticky-content {12
font-size: 14px;13
padding: 2rem 0;14
margin-bottom: 2rem;15
}16
17
.example-static {18
padding: 2rem 0;19
font-size: 14px;20
background: #fbfbfb;21
border: 1px dashed #dcd9d9;22
}23
24
#footer {25
padding: 6rem;26
text-align: center;27
}xxxxxxxxxx1
$(function () {2
$(".sticky").sticky({3
topSpacing: 904
, zIndex: 25
, stopper: "#YourStopperId"6
});7
}); Console errors: 0