I have a page with 5 divs and a footer. I want for one DIV to be stickied at the bottom of a screen while a user scrolls. I had half achieved this with fixed bottom but then it would overlap the footer. Another thing I tried was to have the footer with a higher z-index but I'd prefer the sticky DIV to not go behind the footer. Eg. If I scroll down and my sticky div is at the bottom of the screen and I reach the footer, it will dock touching the top of the footer until I scroll back up in which case it would follow me back up the page but always stay at the bottom of the screen
http://jsfiddle.net/aq9Laaew/194890/
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor mollis mi id molestie. Quisque id commodo lectus. Morbi lacus arcu, venenatis eu faucibus at, fermentum eu massa. Praesent non mauris mattis nisl maximus luctus quis a ex. Nullam rutrum bibendum bibendum. Sed felis ligula, placerat vitae lacus et, eleifend porta velit. In hac habitasse platea dictumst. Vivamus pharetra, tellus id rutrum accumsan, neque urna tincidunt sapien, in faucibus tortor enim sed purus. Curabitur posuere venenatis purus, tincidunt placerat tellus pretium ac. Mauris elementum nulla id velit fringilla luctus.
Curabitur dolor nulla, feugiat a enim id, eleifend ullamcorper augue. Curabitur sit amet neque ultrices, ornare risus id, aliquam augue. Curabitur finibus vestibulum enim nec feugiat. Nulla ac mauris ultricies, laoreet risus ut, rutrum sapien. Pellentesque sed suscipit magna. Ut vel metus at turpis semper rutrum non ut ante. Nunc venenatis nisl odio, ac eleifend ligula lacinia dictum. Sed laoreet luctus arcu, ut mattis orci facilisis a. Pellentesque sollicitudin nulla non augue semper ullamcorper. Nam nec rutrum diam. Sed purus ex, dignissim mollis mauris ut, dignissim posuere libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vel euismod urna, a sodales libero. Phasellus risus orci, scelerisque sit amet nulla eu, pharetra eleifend augue.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum mauris ornare mi porta, sit amet mattis dolor fringilla. Nunc convallis felis odio, id dapibus enim dapibus non. Nam eleifend, turpis eget tincidunt mollis, justo eros lacinia purus, quis tempor ligula purus ac velit. Proin blandit nec nulla et sollicitudin. In quis turpis ante. Nullam elementum et enim blandit venenatis. Aliquam tristique tortor non neque lacinia venenatis malesuada sit amet nisi. Etiam congue suscipit quam at laoreet. Maecenas purus lectus, maximus at luctus aliquam, consequat nec justo. Morbi libero libero, ornare sed mattis vel, consequat id lorem. Morbi pulvinar, neque eu tempus euismod, ipsum massa congue felis, et consectetur dui quam nec tortor. Donec neque nunc, sodales vel nibh sit amet, finibus tempus nibh. Quisque euismod dignissim quam, nec tempus dolor tristique nec. Nulla eget justo pulvinar, rutrum quam non, consequat mauris. </div>
</div>
<div class="row">
<div class="col">
This DIV Sticks BECAUSE IMPORTANT INFO GOES HERE </div>
</div>
<div class="row">
<div class="col">
Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor mollis mi id molestie. Quisque id commodo lectus. Morbi lacus arcu, venenatis eu faucibus at, fermentum eu massa. Praesent non mauris mattis nisl maximus luctus quis a ex. Nullam rutrum bibendum bibendum. Sed felis ligula, placerat vitae lacus et, eleifend porta velit. In hac habitasse platea dictumst. Vivamus pharetra, tellus id rutrum accumsan, neque urna tincidunt sapien, in faucibus tortor enim sed purus. Curabitur posuere venenatis purus, tincidunt placerat tellus pretium ac. Mauris elementum nulla id velit fringilla luctus.</div>
</div>
<div class="row">
<div class="col">
Four
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor mollis mi id molestie. Quisque id commodo lectus. Morbi lacus arcu, venenatis eu faucibus at, fermentum eu massa. Praesent non mauris mattis nisl maximus luctus quis a ex. Nullam rutrum bibendum bibendum. Sed felis ligula, placerat vitae lacus et, eleifend porta velit. In hac habitasse platea dictumst. Vivamus pharetra, tellus id rutrum accumsan, neque urna tincidunt sapien, in faucibus tortor enim sed purus. Curabitur posuere venenatis purus, tincidunt placerat tellus pretium ac. Mauris elementum nulla id velit fringilla luctus.</div>
</div>
<div class="row">
<div class="col">
Five </div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue pt-4" style="background-color:orange;">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3" >
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
