フッターで静的サイドバーを停止するには

Question

スクロールには静的サイドバーがありますが、フッタに重なると重なってしまいます。このフッタへのスクロールを止める方法はありますか？私はこれが単純な概念かもしれないと理解していますが、私はJQueryでScrollイベントを扱う経験はほとんどありません。

下記のコードとコードページをご覧ください。

<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

あなたはそれがフッターを重複している場合は、静的な要素を隠す$('nav').addClass('stick');後にifの状態で1つの以上の条件を追加する場合：

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

Answer 2

あなたが望むすべてがフッター、JavaScriptを使用する必要はありませんし、スクロールイベントを重複しないあなたのdivのためである場合は、そのためのCSSを使用することができます。 nav.stickにz-index:-1;を追加するだけです。また、ページ内の他の要素を調べるために大きなz-indexが必要な場合は、フッターposition:absolute;と大きなz-index（フッターの下のコンテンツがbody要素にpadding-bottomを追加しないようにする）を与えることができます。