Css。フッタにオーバーレイされている場合に固定位置でdivを移動する方法

Question

私はメニュー、コンテンツ、フッターを持っています。メニューの位置は固定です。ページの最後までスクロールすると、フッターがオーバーレイされます。フッタをオーバーレイするようになると、メニューを上に移動するにはどうすればよいですか？

編集：私はブートストラップクラスを使用 。 マイHtmlの

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3" id="myScrollspy"> 
      <ul class="nav nav-pills nav-stacked"> 
       <li class="active"><a href="#section1">Section 1</a></li> 
       <li><a href="#section2">Section 2</a></li> 
       <li><a href="#section3">Section 3</a></li> 
       ... 
      </ul> 
     </div> 
     <div class="col-sm-9"> 
      <div id="section1">  
       <h1>Section 1</h1> 
       <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
      </div> 
      <div id="section2"> 
       <h1>Section 2</h1> 
       <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
      </div> 
      ... 
    </div> 
</div> 

は、CSS：

ul.nav-pills { 
     position:fixed; 
} 

Answer 1

ブートストラップ "affix"プラグインを使用する必要があります。

http://getbootstrap.com/javascript/#affix

あなたはここでそれがscrollspyとの組み合わせでどのように機能するかの例を見ることができます。 http://codepen.io/SitePoint/full/GgOzwX/（私のコードではありません）

あなたがしていることは、いつ「固定」要素であるかを開始して停止するかを指示することです。

$('#nav').affix({ 
    offset: {  
     top: $('#nav').offset().top, 
     bottom: ($('footer').outerHeight(true) + $('.application').outerHeight(true)) + 40 
    } 
}); 

Answer 2

変更メニュー、コンテンツ、フッターをブロックします。

はCSSを追加：

.clearfix::before, .clearfix::after { 
    content: ""; 
    display: table; 
} 
.clearfix::after { 
    clear: both; 
} 

をし、あなたのフッター（最上位階層）にし、クラスcontainerにクラスclearfixを追加します。