How can I make the sidebar stick? - html

Question

Currently, I've made it so that the sidebar appears where the 'apply' page starts. I want the sidebar to then remain in that position as the user continues to scroll down. Another thing that confuses me is that when I set the position to 'absolute' for the bar, it just disappears completely. Why does this happen?
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

You need to use position: fixed fix the position to the view.
You can then use: top right left and bottom to put the element where you want it to be. So right: 0; and top: 0; put the element 0px from the right and top.
The same is true for position absolute, if you didn't use any of those that may be why it disappeared.
See here for more details on css position property: 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>