如何使标题固定且内容必须在已经固定的位置上滚动

Question

嗨，我有一种情况，我想保持标题1为fixed并且content重置必须scroll

下图显示了它们：

下面是我当前的代码：

 #wrapper { padding-left: 0; transition: all 0.5s ease; height: 100%; } #sidebar-wrapper { z-index: 1000; position: fixed; top: 0; left: 0; width: 210px; height: calc(80vh - 6px); /* As you give a border of 3px */ overflow-y: auto; background: rgba(0,0,0,0.9); transition: all 0.5s ease; border: 3px solid red; color:white; } .stories-preview-wrapper{ position: fixed; height: calc(20vh - 6px); /* As you give a border of 3px */ bottom: 0; left: 0; overflow-y: auto; border: 3px solid green; width: 210px; } .header{ z-index: 100001; color: #fff; display: block; text-align: center; border-bottom: 1px solid red; } 

 <div id="wrapper" class="toggled hidden-xs"> <!-- Sidebar --> <div id="sidebar-wrapper"> <div class="header"> <h4> Heading 1 </h4> </div> <ul class="sidebar-nav"> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> </ul> </div> <div class="stories-preview-wrapper"> <div class="header"> <h4> Heading 2 </h4> </div> <ul class="sidebar-nav"> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> </ul> </div> </div> 

请提前帮助我！！！

Answer 1

尝试将.header设置为position: sticky并记住将top: 0设置为top: 0

希望这可以帮助！ 干杯

 #wrapper { padding-left: 0; transition: all 0.5s ease; height: 100%; } #sidebar-wrapper { z-index: 1000; position: fixed; top: 0; left: 0; width: 210px; height: calc(80vh - 6px); /* As you give a border of 3px */ overflow-y: auto; background: rgba(0,0,0,0.9); transition: all 0.5s ease; border: 3px solid red; color:white; } .stories-preview-wrapper{ position: fixed; height: calc(20vh - 6px); /* As you give a border of 3px */ bottom: 0; left: 0; overflow-y: auto; border: 3px solid green; width: 210px; } .header{ z-index: 100001; color: #fff; background-color: #000000; padding: 5px; display: block; position: sticky; top: 0; text-align: center; border-bottom: 1px solid red; } 

 <div id="wrapper" class="toggled hidden-xs"> <!-- Sidebar --> <div id="sidebar-wrapper"> <div class="header"> <h4> Heading 1 </h4> </div> <ul class="sidebar-nav"> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> </ul> </div> <div class="stories-preview-wrapper"> <div class="header"> <h4> Heading 2 </h4> </div> <ul class="sidebar-nav"> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> <li>hello world 2</li> </ul> </div> </div> 

Answer 2

使用以下内容更新您的CSS：

#sidebar-wrapper {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 210px;
    height: calc(80vh - 6px); /* As you give a border of 3px */
    background: rgba(0,0,0,0.9);
    transition: all 0.5s ease;
    border: 3px solid red;
    color:white;
}

.sidebar-nav {
    overflow: auto;
}