Question

我在网上找到了很多关于如何修复侧边栏的解释，但是当侧边栏的内容长于屏幕可以显示时，我遇到了问题。

如果你悬停在顶部，有没有办法让侧边栏“固定”但“可滚动”？

编辑：我正在添加jfiddle作为示例。 THX

html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;}
.right{width:200px;top: 100px; bottom: 0px;position: fixed;}
.center,.right,.bodywrap{height:100%}
.right{right:0}
.right{background-color:#ccc}
.head{background-color:#777}

<div class='wrap'>
    <div class='head'>Header</div>
    <div class='bodywrap'>
        <div class='right'>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br></div>
        <div class='center'>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br>content center div scolls<br> </div>
    </div>
</div>

Answer 1

您应该可以通过将侧边栏（.right）的溢出设置为：overflow-y: scroll;来使其可滚动。

因此，

.right {
   overflow-y: scroll;
}

希望它有所帮助。

滚动时CSS使侧边栏固定但悬停在顶部时可滚动

1 个答案: