固定侧栏垂直居中

Question

A website I am building has a fixed sidebar on the left at the center of the screen. It should always stay at the vertical center of the browser window when the page is scrolled.

How can I achieve this effect? Is there a pure css/html solution?

I thought about updating the sidebars position onscroll, but it is likely to flicker as the css top position gets updated. Is there any other solution? I would really like to do this with css only, but I wouldnt mind if jquery would provide the functionality I am looking for.

Answer 1

You probably need to add position: fixed; to the css to make it so that it does not move.

Answer 2

Here's what you are looking for. Please note that mobile browsers will ignore position:fixed so you will need to use some js to make it work for them as well. Also, make sure that the container's min-height is 200px;

#sidebar
{
    height: 200px;
    position: fixed;    /* Keep in position on scroll */
    top: 50%;       /* push down 50% of container */
    margin-top: -100px; /* bring back up 50% height of this element */
}

#container
{
    min-height: 200px;
    _height: 200px; /* IE6 always acts as though height is min-height unless overflow: hidden */
}