Question

我需要在到达页脚时停止固定的侧边栏。我有下面的代码，但是如果向下滚动，边栏在到达时会越过页脚。当然，在向上滚动时会再次固定在顶部。有什么帮助吗？

＆＃13;

$(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 210) {
      alert ("footer reached!");
      $('.sidebar').css({
        position: 'fixed',
        bottom: 210,
      })
      
   } else {
     
      $('.sidebar').css({
        position: 'fixed',
        top: 0
     })
   }
});

＆＃13;

.body {
   overflow: hidden;
    height: 1000px;
}

.sidebar {
    height: 400px;
    width: 200px;
    background: red;
    float: left;
}


.footer {
   height: 200px;
   background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="body">
    <div class="sidebar"></div>
</div>
<div class="footer"></div>

＆＃13;

Answer 1

签出jQuery插件ScrollToFixed。它确实适合你。我已经用它取得了相当不错的成功。

代码：https://github.com/bigspotteddog/ScrollToFixed

演示页：http://bigspotteddog.github.io/ScrollToFixed/

此外，如果您发现自己使用Bootstrap，它们会有类似我称之为“Affix”的类似内容。

jQuery：从顶部固定到底部固定到达页脚时

1 个答案: