首页 文章

固定侧栏垂直居中

提问于
浏览
1

我正在建设的网站在屏幕中央左侧有一个固定的侧边栏 . 滚动页面时,它应始终保持在浏览器窗口的垂直中心 .

我怎样才能达到这个效果?有没有纯css / html解决方案?

我考虑过更新侧栏位置onscroll,但随着css顶部位置的更新,它可能会闪烁 . 还有其他解决方案吗?我真的很想用css做这个,但我不介意jquery会提供我正在寻找的功能 .

2 回答

  • 2

    这就是你要找的东西 . 请注意,移动浏览器将忽略 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 */
    }
    
  • 4

    您可能需要将 position: fixed; 添加到css中以使其不会移动 .

相关问题