サイドバーでスクロールするときに空白を防ぐ方法は？

Question

私は現在、ブートストラップを使ってサイドバーを構築しています。 私はバーを作りましたが、ページを下にスクロールすると、サイドバーとnavbarの間に空白が表示されます。とにかく、私はnavbarを静止したままにすることができますか、またはページがスクロールダウンしたときに空白を埋めることはできますか？私はスクリーンショットとコードを含んでいます。 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を変更します。

これを理解する最も良い方法は、positionプロパティの値の影響を理解することです。以下は、positionプロパティのw3schools定義へのリンクです。descriptionを持つ値です。

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

は、この情報がお役に立てば幸いです。あなたの実際のサイドバーのラッパーCSSルールにこれを追加すること

Answer 2

試してみてください。

.sidebar-wrapper{ 
top:0; 
}