sticky sidebar css


This is a sticky side bar, and you can either use Java or CSS. For this class ill just be posting the CSS code as its simpler.

#sidebar {
position: fixed;
left: 0;
top: 100px;
height: 100px;
bottom: 25px;
overflow: auto;
background-color: pink;

Screen Shot 2013-11-14 at 9.38.53 AM

This is all you need or code, you are creating a new DIV for your sidebar. This DIV can be placed anywhere in your HTML document if you want it bound to the full browser window (if you want it inside another DIV then place the code within that DIV).

The code is dictating that the position is fixed while the left margin is at zero locking the DIV to the left portion of the screen.

Top is dictating the Top margin of 100px this can be changed to whatever you require. This is the same for Height and Bottom.

Overflow: Auto; is dictating that the object will always flow with the scaling of the page.

Background-color: Pink; is applying a background color just so you can see the actual DIV.

Any other edits to things within the DIV such as fontface, color, size, outline, etc.. are all editable. Even though this DIV is doing something different like maintaining a position, it is still just a DIV.