I'm making a website (/), and I'd like to make the menu bar on the left scroll with the page. In other words, it would start on the page as it is, and then, when the user scrolls down, it would stay fixed, relative to the browser window. The idea es from the links on the right hand side on some StackOverflow pages, like here.
How could I achieve this?


PS: I already know how to make a div stay fixed on the left, using position: fixed; left: 0;, but my question is how to do this in the middle of the page, without knowing the distance from the side of the window (since the page sits in the middle, regardless of window size)

I'm making a website (http://www.deayoga.ch/), and I'd like to make the menu bar on the left scroll with the page. In other words, it would start on the page as it is, and then, when the user scrolls down, it would stay fixed, relative to the browser window. The idea es from the links on the right hand side on some StackOverflow pages, like here.
How could I achieve this?


PS: I already know how to make a div stay fixed on the left, using position: fixed; left: 0;, but my question is how to do this in the middle of the page, without knowing the distance from the side of the window (since the page sits in the middle, regardless of window size)

• javascript
• html
• css

Share Improve this question Follow edited May 23, 2017 at 12:11 CommunityBot 111 silver badge asked Aug 18, 2011 at 18:14 Sean BoneSean Bone 3,56688 gold badges3434 silver badges5050 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Remy Sharp has a very nice tutorial (with video) on how to do exactly this:

http://jqueryfordesigners./fixed-floating-elements/

Sounds like a math problem... use JS to get the window size, divide by two to get the mid-point, subtract half the size of your fixed div from the mid-point value, then set your CSS position "left" value to that.

Add this tto your stylesheet instead of the class you have now for #leftcol

#leftcol {
    position: fixed;
    top: 50%;
    margin-left: 20px;
    margin-top: -150px;
    text-align: center;
}

Then add the following to your #container class:

position: relative;

Your menu is now in the middle of the page. You might need to reposition the content though... just add a margin.