在到達頁腳時使固定位置div停止

Question

我有一個側邊菜單(.link-panel) 。 里面.link-panel是一個div (.cover) ，它(.cover) .link-panel的內容。 .cover是一個固定的div，以便在用戶滾動時鏈接可以移動。 我面臨的唯一問題是我在底部有一個頁腳，每當我向下滾動時， cover div就會出現在.footer頂部。 我試圖使它成為.cover到達頁腳時停止。 那樣.footer和.cover不會重疊。 我嘗試使用一些jQuery來解決這個問題，但我的技術不起作用。 它產生了非常奇怪的結果。 有時，某些鏈接位於窗口上方且無法顯示，有時當您向下滾動到.footer ， .footer .link-panel在滾動時不會再次顯示。 你可以在這里看到並試驗我創建的jsFiddle 。

HTML

<div class="container">

  <div class='control_panel'>
    <div class='control_title'>
      <h2>Your Settings</h2>
    </div>

    <div class='control_settings'>

    </div>
  </div>

  <div class="link-panel">
  <div class="cover">


    <ul>


      <li> Dashboard</li>
      <hr>
      <li> Blog</li>
      <hr>
      <li><span><b>|</b> Settings</span></li>
      <hr>
      <li> Contact Us</li>


    </ul>
      </div>
  </div>
  <!--End of link panel div-->
</div>

<div class='footer'>

</div>

CSS

.container {
  display: block;
  margin: 0px auto;
  width: 100%;
  padding-left: 30%;
  box-sizing: border-box;
  position: relative;
}

.footer {
  display: block;
  width: 100%;
  height: 500px;
  background-color: black;
  margin-top: 0px;
}

html,
body {
  position: relative;
  height: 100%;
  background-color: #f2f2f2;
}

.control_panel {
  position: relative;
  display: inline-block;
  width: 60%;
  margin-left: 0px;
}

.control_title {
  display: block;
  background-color: white;
  height: 100px;
  margin-bottom: 30px;
}

.control_settings {
  display: block;
  background-color: white;
  height: 900px;
  width: 900px;
}

.link-panel {
  position: absolute;
  float: left;
  width: 30%;
  height: 100%;
  background-color: #333333;
  left: 0;
  top: 0;
}

.cover{
   position: fixed;
}
.link-panel ul {
  list-style-type: none;
  font-size: 19px;
  margin-top: 35px;
}

.link-panel li {
  margin-top: 15px;
}

jQuery的

function checkOffset() {
  var a=$(document).scrollTop()+window.innerHeight;
  var b=$('.footer').offset().top;
  if (a<b) {
    $('.cover').css('bottom', '-14');
  } else {
    $('.cover').css('bottom', (-14+(a-b))+'px');
  }
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);

如何設置它以便.cover在用戶滾動時上下移動，但在到達.footer時停止，但是當用戶再次向上滾動時， .cover ？

Answer 1

編輯：希望現在它也適用於Chrome。

我為你的案子做了一個小提琴： https ： //jsfiddle.net/g8ctha2o/5/

告訴我它是否適合你。

基本上你要做的是檢查滾動事件，菜單的下邊緣的位置值小於頁腳的上邊緣。 一旦這不再成立，你就會達到一個滾動閾值，你可以用jQuery將其位置從fixed更改為absolute。

var menuBottom,
  footerTop = $('.footer').offset().top,
  positionChanged = false,
  scrollThreshold;

$('.scrollable').on('scroll', function() {
  menuBottom = $('.scrollable').scrollTop() + $('.menu').offset().top + $('.menu').outerHeight();
  if (!positionChanged) {
    if (menuBottom + 5 >= footerTop) {
      scrollThreshold = $('.scrollable').scrollTop();
      $('.menu').css({
        visibility: 'hidden',
        position: 'absolute',
        top: menuBottom - $('.menu').outerHeight() - 5,
        right: 35,
        visibility: 'visible'
      });
      positionChanged = true;
    }
  } else {
    if (scrollThreshold > $('.scrollable').scrollTop()) {
      $('.menu').css({
        position: 'fixed',
        top: 450,
        right: 60
      });
      positionChanged = false;
    }
  }
});