如何在页脚处停止静态侧边栏

Question

我在滚动条上有一个静态的侧边栏，但是当它到达页脚时就会重叠。 有没有办法让我停止滚动到页脚？ 我知道这可能是一个简单的概念，但是我在JQuery中使用Scroll事件的经验很少，因此任何帮助都将是很棒的。

请在下面找到我的代码和CodePen。

 <div id="main">
   <div class="spacing">CONTENT HERE TO SHOW HOW THE SCROLL WILL WORK. PLEASE SCROLL DOWN</div>
   <div class="container">
      <div id="sidebar">
         <div id="nav-anchor"></div>
         <nav>
            <ul>
               <li><a href="#blue">Blue</a></li>
               <li><a href="#green">Green</a></li>
               <li><a href="#red">Red</a></li>
               <li><a href="#yellow">Yellow</a></li>
               <li><a href="#purple">Purple</a></li>
            </ul>
         </nav>
      </div>
      <!-- /sidebar -->
      <div id="content">
         <section id="blue">
            ...
         </section>
         <section id="green">
            ...
         </section>
         <section id="red">
            ...
         </section>
         <section id="yellow">
            ...
         </section>
         <section id="purple">
            ...    
         </section>
      </div>
      <!-- /#content -->
   </div>
   <!-- /.container -->
   <footer>
      <p>Footer here</p>
   </footer>
</div>
<!-- /#main -->


$(document).ready(function(){

    $(window).scroll(function(){
        var window_top = $(window).scrollTop() + 12; 
        var div_top = $('#nav-anchor').offset().top;
            if (window_top > div_top) {
                $('nav').addClass('stick');
            } else {
                $('nav').removeClass('stick');
            }
    });


});

http://codepen.io/harryberry94/pen/MyOezg

Answer 1

如果您只想让div不重叠页脚，则可以使用css，而无需使用javascript和scroll事件。 只需添加z-index:-1; nav.stick 同样，如果需要更大的z-index来遍历页面中的其他元素，则可以指定页脚position:absolute; 以及更大的z索引（为防止内容在页脚下方移动，请将padding-bottom添加到body元素下）。

Answer 2

如果要在与页脚重叠时隐藏静态元素，请在$('nav').addClass('stick');之后的if条件中添加一个条件$('nav').addClass('stick'); ：

var footer_top = $("footer").offset().top;
var static_div_bottom = $('nav').offset().top + $('nav').height();
$('#abc').text(footer_top +" " +  static_div_bottom +" " + window_top);
if(static_div_bottom > footer_top){
    $('nav').removeClass('stick');
}