I need help with making one DIV stick to the bottom of the screen while scrolling, without overlapping the footer. I have tried using fixed bottom but it overlaps the footer. I also attempted to set a higher z-index for the footer, but I would prefer the sticky DIV not to go behind the footer. What I want is for the sticky DIV to dock at the top of the footer when the user scrolls down and then follow back up when scrolled up, always staying at the bottom of the screen.
Here is a link to the code snippet
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
One
Lorem ipsum dolor sit amet, consectetur adipiscing elit...[truncated for brevity]
...</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...[truncated for brevity]...</div>
</div>
<div class="row">
<div class="col">
Four
Lorem ipsum dolor sit amet, consectetur adipiscing elit...[truncated for brevity]...</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">
...[truncated for brevity]...
</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 -->