javascript - 到达页脚时使固定位置 div 停止

Question

我有一个侧面菜单(.link-panel)。 .link-panel 内部是一个 div (.cover)，它保存 .link-panel 的内容。 .cover 是一个固定的 div，以便当用户滚动时链接可以移动。我面临的唯一问题是我在底部有一个页脚，每当我向下滚动时，cover div 就会位于.footer 的顶部。我正在尝试使 .cover 在到达页脚时停止。这样 .footer 和 .cover 就不会重叠。我尝试使用一些 jQuery 来解决这个问题，但我的技术不起作用。它产生了非常奇怪的结果。有时，某些链接位于窗口上方，无法显示，其他时候，当您向下滚动到 .footer 时，.link-panel 不会显示滚动时再次向上。你可以看看并实验here with the 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。

我为你的情况做了一个 fiddle :https://jsfiddle.net/g8ctha2o/5/

告诉我它是否适合你。

基本上，您所做的就是检查滚动事件，确保菜单底部边缘的位置值小于页脚顶部边缘的位置值。一旦情况不再如此，您就会达到滚动阈值，在该阈值中您可以使用 jQuery 将其位置从固定位置更改为绝对位置。

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;
    }
  }
});