Html Sticky DIV保留在滚动的底部，但不与页脚重叠

我有一个有5个div和一个footer的页面。我想让一个DIV在用户滚动时粘在屏幕底部。我已经完成了一半的固定底部，但它会重叠的页脚。我尝试的另一件事是让页脚具有更高的z索引，但我更喜欢粘性DIV，而不是在页脚后面。如果我向下滚动，我的粘滞div位于屏幕底部，我到达页脚，它将停靠在页脚顶部，直到我向上滚动，在这种情况下，它将跟随我返回页面，但始终停留在屏幕底部

---

您需要使用Javascript在您的网站上实现此功能。请看这个问题，它概述了您需要做什么来实现：

'固定在页脚处的div'

 <!-- 
  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 -->