Wie kann ich die Sidebar stecken lassen?

Question

Derzeit habe ich es so gemacht, dass die Sidebar erscheint, wo die 'apply' Seite beginnt. Ich möchte, dass die Seitenleiste in dieser Position bleibt, während der Benutzer weiter herunterscrollt. Eine andere Sache, die mich verwirrt, ist, dass, wenn ich die Position für den Balken auf "absolut" setze, er einfach vollständig verschwindet. Warum passiert das?

CSS:

#navbar { 
    background-color: black; 
    overflow: auto; 
    height: 100%; 
    width: 25%; 
    z-index: 1000; 
    float: right; 
} 

#navbar-links { 
    list-style-type: none; 
    display: block; 
} 

#apply { 
    background-color: red; 
} 

#about { 
    background-color: orange; 
} 

#sponsor { 
    background-color: green; 
} 

HTML:

<div id="pages"> 
    <!-- apply page --> 
    <div id="apply" class="sections" tabindex='2'> 
     <!-- navigation bar --> 
     <div id="navbar"> 
      <ul id="navbar-links"> 
       <li>Apply</li> 
       <li>About</li> 
       <li>Sponsor</li> 
      </ul> 
     </div> 
     <div class="container"> 

     </div> 
    </div> 

    <!-- about page --> 
    <div id="about" class="sections" tabindex='3'> 
     <div class="container"> 

     </div>   
    </div> 

    <!-- sponsor page --> 
    <div id="sponsor" class="sections" tabindex='4'> 
     <div class="container"> 

     </div>   
    </div> 
</div> 

Answer 1

Sie müssen verwenden position: fixed die Position der Ansicht fixieren.

Sie können dann verwenden: toprightleft und bottom, um das Element, wo Sie es sein möchten. So right: 0; und top: 0; setzen Sie das Element 0px von rechts und oben.

Das gleiche gilt für die absolute Position, wenn Sie keine von denen verwendet haben, die möglicherweise verschwunden sind.

Sehen Sie hier für weitere Details über css Eigenschaft position: http://www.w3schools.com/cssref/pr_class_position.asp

#navbar { 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    background-color: black; 
 
    color: white; 
 
    overflow: auto; 
 
    height: 100%; 
 
    width: 25%; 
 
    z-index: 1000; 
 
} 
 

 
#navbar-links { 
 
    list-style-type: none; 
 
    display: block; 
 
} 
 

 
#apply { 
 
    background-color: red; 
 
} 
 

 
#about { 
 
    background-color: orange; 
 
} 
 

 
#sponsor { 
 
    background-color: green; 
 
}

<div id="pages"> 
 
    <!-- apply page --> 
 
    <div id="apply" class="sections" tabindex='2'> 
 
     <!-- navigation bar --> 
 
     <div id="navbar"> 
 
      <ul id="navbar-links"> 
 
       <li>Apply</li> 
 
       <li>About</li> 
 
       <li>Sponsor</li> 
 
      </ul> 
 
     </div> 
 
     <div class="container"> 
 

 
     </div> 
 
    </div> 
 

 
    <!-- about page --> 
 
    <div id="about" class="sections" tabindex='3'> 
 
     <div class="container"> 
 

 
     </div>   
 
    </div> 
 

 
    <!-- sponsor page --> 
 
    <div id="sponsor" class="sections" tabindex='4'> 
 
     <div class="container"> 
 

 
     </div>   
 
    </div> 
 
</div>