如何在使用侧边栏滚动时防止出现空白？

Question

我目前正在使用bootstrap构建一个侧栏。 我建立了酒吧，但是当我向下滚动页面时，边栏和导航栏之间会出现一个空白区域。无论如何，我可以让导航栏保持静止，或者在页面向下滚动时填入空白处？我已经包含屏幕截图和代码。 Normal, before scrolling

After Scrolling

代码如下：

<nav class = "navbar navbar-inverse"> 
    <div class = "container-fluid"> 
     <div class = "navbar-header"> 
      <button type = "button" class="navbar-toggle" data- 
toggle="collapse" data-target="#myNavbar"> 
       <span class= "icon-bar"></span> 
       <span class= "icon-bar"></span> 
       <span class= "icon-bar"></span> 
      </button> 
      <a class = "navbar-brand" href="Home.html">Stephens Catering</a> 
     </div> 

     <div class = "collapse navbar-collapse" id="myNavbar"> 
      <ul class = "nav navbar-nav"> 
       <li><a href="Home.html">Home</a></li> 
       <li><a href="AboutUs.html">About Us</a></li> 
       <li class="dropdown"> 
    <a class = "dropdown-toggle" data-toggle="dropdown" 
    href="OurProducts.html">Our Products 
        <span class = "caret"></span></a> 
        <ul class = "dropdown-menu"> 
         <li><a href="Cookers.html">Cookers</a></li> 
         <li><a href="Fridges.html">Fridges</a></li> 
         <li><a href="Misc.html">Misc</a></li> 
        </ul> 
       </li> 
       <li><a href="ContactUs.html">Contact us</a></li> 
      </ul> 

      <ul class = "nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"> 
</span> Sign Up</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-in"> 
</span> Login</a></li> 
      </ul> 

     </div> 
    </div> 
</nav> 

<!--The sidebar for the products pages --> 
<div id = "wrapper"> 
    <!-- Sidebar --> 
    <div id = "sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class = "sidebar-brand"> 
       <a href="#">Categories</a> 
      </li> 
      <li> 
       <a href="Cookers.html">Cookers</a> 
      </li> 
      <li> 
       <a href="Fridges.html">Fridges</a> 
      </li> 
      <li> 
       <a href="Misc.html">Misc</a> 
      </li> 
     </ul> 
    </div> 
    <!-- Sidebar Wrapper --> 

<!-- Page Content --> 
<!-- Button to toggle sidebar menu --> 
<div id="page-content-wrapper"> 
    <div class="container-fluid"> 
     <div class = "row"> 
      <div class = "col-lg-12"> 
       <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
      </div> 
     </div> 
    </div> 
</div> 

样式表：

body { 
overflow-x: hidden; 

}

/* Toggle Styles */ 

#wrapper { 
padding-left: 0; 
-webkit-transition: all 0.5s ease; 
-moz-transition:all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s; 
} 

#wrapper.toggled { 
padding-left:250px; 
} 

#sidebar-wrapper { 
z-index: 1000; 
position:fixed; 
left:250px; 
width:0; 
height:100%; 
margin-left: -250px; 
overflow-y: auto; 
background: #000; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
width:250px; 
} 

#page-content-wrapper { 
width:100%; 
position:absolute; 
padding:15px; 
} 

#wrapper.toggled #page-content-wrapper { 
position:absolute; 
margin-right: -250px; 
} 

/* Sidebar Styles */ 

.sidebar-nav { 
position:absolute; 
top:0; 
width:250%; 
margin:0; 
padding:0; 
list-style: none; 
} 

.sidebar-nav li { 
text-indent:20px; 
line-height: 40px 
} 

.sidebar-nav li a { 
display: block; 
text-decoration: none; 
color:#999999; 
} 

.sidebar-nav li a:hover { 
text-decoration: none; 
color:#fff; 
background:rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li focus { 
text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
height:65px; 
font-size:18px; 
line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
color:#999999; 
} 

.sidebar-nav > sidebar-brand a:hover{ 
color:#fff; 
backround:none; 
} 

@media(min-width: 768px) { 
#wrapper { 
    padding-left:0; 
} 

#wrapper.toggled { 
    padding-left:250px; 
} 

#sidebar-wrapper { 
    width:0; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width:250px; 
} 

#page-content-wrapper { 
    padding:20px; 
    position: relative; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: relative; 
    margin-right:0; 
} 
} 

Answer 1

我觉得你的问题正在使用#sidebar-wrapper css类中的position:fixed，这会导致它粘到屏幕上的定位位置，而不会影响滚动效果。如果你想让它粘在顶部导航栏的下面，那么将它改为position:absolute，你的问题将有望得到解决。如果您希望它坚持顶部并保持侧边栏的黑色背景沿着底部，请更改#sidebar-wrapperposition:relative。

要理解这一点，最好的方法是了解位置属性值的影响。以下是位置属性的w3schools定义的链接及其描述的值。

https://www.w3schools.com/cssref/pr_class_position.asp

希望这会有所帮助。

Answer 2

尝试添加以下内容到实际侧边栏包装CSS规则：

.sidebar-wrapper{ 
top:0; 
}