垂直居中的固定側欄

Question

我正在構建的網站在屏幕中央左側有一個固定的側欄。當頁面滾動時，它應始終停留在瀏覽器窗口的垂直中心。

我該如何達到這個效果？有沒有純粹的CSS/HTML解決方案？

我想過更新側欄位置onscroll，但它可能會閃爍，因爲css頂部位置得到更新。還有其他解決方案嗎？我真的很想用CSS來做到這一點，但我不介意jQuery是否會提供我正在尋找的功能。

Answer 1

這是你在找什麼。請注意，移動瀏覽器將忽略position:fixed，因此您需要使用一些js以使其適用於他們。另外，請確保容器的最小高度爲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 */ 
} 

Answer 2

您可能需要將position: fixed;添加到CSS以使其不移動。