Css. Wie man div mit fester Position bewegt, wenn es Footer überlagert

Question

Ich habe ein Menü, einen Inhalt und eine Fußzeile. Das Menü hat eine feste Position. Wenn ich es bis zum Ende der Seite scrolle, wird es die Fußzeile überlagern. Wie kann ich das Menü zwingen, nach oben zu gehen, wenn es anfängt, die Fußzeile zu überlagern?

EDIT: Ich verwende Bootstrap-Klassen. Meine 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

Sie sollten das Bootstrap "Affix" Plugin verwenden.

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

Sie können hier ein Beispiel dafür, wie es mit dem scrollspy in Kombination funktioniert. http://codepen.io/SitePoint/full/GgOzwX/ (nicht mein Code)

Im Wesentlichen was Sie tun, ist es zu sagen, wann zu starten und zu stoppen, ein 'fixed' Element.

Answer 2

ändern Menü, Inhalt und Fußzeile zu blockieren.

add css:

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

und fügen Klasse clearfix in Ihre Fußzeile (höchste Hierarchie) und zur Klasse container.