我有一个包含5个div和一个页脚的页面。我希望在用户滚动时将一个DIV粘贴在屏幕底部。我已经用固定的底部实现了这一目标，但随后它将与页脚重叠。我尝试的另一件事是使页脚具有较高的z索引，但我希望粘性DIV不落后于页脚。例如。如果我向下滚动并且我的粘性div位于屏幕底部并且到达页脚，则它将停靠在页脚顶部，直到我向上滚动，在这种情况下它将跟随我返回页面，但始终保持在屏幕底部
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 -->
答案 0 :(得分：1)
您将需要使用Javascript在网站上实现此功能。请参阅此问题，其中概述了您需要实现的目标：
“固定在页脚处的div”