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

你可以使用css，如果你想要的只是你的div不重叠页脚，不需要使用javascript和滚动事件。只需为z-index:-1;添加nav.stick即可。此外，如果需要更大的z-index来覆盖页面中的其他元素，您可以给页脚position:absolute;和更大的z-index（以防止内容在页脚下添加padding-bottom到body元素）。

Answer 2

如果要在页脚重叠时隐藏静态元素，请在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');
}

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

2 个答案: