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

我有一个侧菜单

（.link面板）

。在

.link panel

内部是一个div

（.cover）

，它保存

链接面板的内容
.cover
是一个固定的div，因此当用户滚动时链接可以移动。我面临的唯一问题是底部有一个页脚，每当我向下滚动
封面
时，div就会出现在
页脚
的顶部。我试图使
.cover
到达页脚时停止。这样，
.footer
和
封面就不会重叠。为了解决这个问题，我尝试使用一些jQuery，但我的技术不起作用。它产生了非常奇怪的结果。有时，某些链接位于窗口上方，无法显示，有时当您向下滚动到
.footer
时，
.link面板
在滚动时不会再次上升。你们可以看到我创造的实验

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>

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

函数checkOffset（）{
var a=$（document.scrollTop（）+window.innerHeight；
var b=$（'.footer'）.offset（）.top；
如果（aEDIT）：希望现在它也能在Chrome上工作

我为你的案子做了一个小提琴：

告诉我它是否适合你

基本上，您要做的是在scroll事件中检查菜单的下边缘的位置值是否小于页脚的上边缘。一旦这不再是真的，您将达到一个滚动阈值，在该阈值中，您可以使用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;
    }
  }
});

编辑：希望现在它也能在Chrome上工作

我为你的案子做了一个小提琴：

告诉我它是否适合你

基本上，您要做的是在scroll事件中检查菜单的下边缘的位置值是否小于页脚的上边缘。一旦这不再是真的，您将达到一个滚动阈值，在该阈值中，您可以使用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;
    }
  }
});

这种技术使菜单与页脚重叠，即使在JSFIDLE中也是如此。它也不允许您完全向下滚动。当我在代码中实现您的解决方案，并在到达页脚后尝试向上滚动时，菜单不会完全向上滚动。我希望菜单在到达页脚时停止，在用户向上滚动时移动。@user2896120奇怪的是，在Firefox中工作得很好。我刚刚在Chrome上试用过，但没有效果。我会查一下。@user2896120你能告诉我它现在对你是否有效吗？嗯，这对我不起作用，因为
。footer
是动态添加到我的项目中的，所以它不会在任何容器中，比如
。scrollable
，也因为某些原因，当你在JSFIDLE中快速向下滚动，菜单与页脚重叠此技术使菜单与页脚重叠，即使在JSFIDLE中也是如此。而且它不允许您完全向下滚动。当我在代码中实现您的解决方案，并尝试在到达页脚后向上滚动时，菜单不会完全向上滚动。我希望菜单在返回时停止当用户滚动返回时，搜索页脚并移动。@user2896120奇怪，Firefox中的user2896120工作得很好。我刚刚在Chrome上试用过，但没有效果。我会查找它。@user2896120你能告诉我它现在对你是否有效吗？嗯，这对我不起作用，因为
.footer
是动态添加到我的项目中的，所以它不会在任何项目中容器类似于
.scrollable
。此外，由于某种原因，当您在JSFIDLE中快速向下滚动时，菜单与页脚重叠