滚动时将 div 粘在左侧

Question

So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.

I have tried using:

position: fixed;

and

position: absolute;

However it cuts the width of the DIV down completely.

To get a view of what I'm working with go to: http://198.50.242.77/YouBB/

I'd prefer to use strictly CSS only but if I must use JS I'll use it.

Thanks!

Answer 1

position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.

position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.

I opened up your web page in Chrome, and changed the styles for #navigation to:

background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;

This does what you want. You will just need to position the rest of the content to the right.