サイドバーをスティックにするにはどうしたらいいですか？

Question

現在、「適用」ページの開始位置にサイドバーが表示されるようにしました。ユーザーが下にスクロールし続けると、サイドバーがその位置にとどまるようにします。私を混乱させるもう一つのことは、私がバーの絶対的な位置に設定すると、それは完全に消えてしまうことです。なぜこれが起こるのですか？

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

あなたがビューに位置を固定position: fixed使用する必要があります。

その後、使用することができます：toprightleftとbottomをあなたがそれを可能にする要素を配置します。したがって、right: 0;とtop: 0;は、右上から要素0pxを配置します。

アブソリュートアブソリュートについては、アブソリュートアブソリュートを使用しなかった場合は、絶対アブソリュートも同じです。

は、CSSの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>