粘性 DIV 在滚动时停留在底部，但不与页脚重叠

Question

我有一个包含 5 个 div 和一个页脚的页面。我希望在用户滚动时将一个 DIV 粘贴在屏幕底部。我用固定底部实现了一半，但它会与页脚重叠。我尝试的另一件事是让页脚具有更高的 z-index，但我更希望粘性 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 -->

Answer 1

您需要使用 Javascript 在您的网站上实现此功能。请参阅此问题，其中概述了您需要做什么才能实现：

'固定在页脚处的 div'

Make sticky/fixed element stop at footer