Comment éviter un espace lors du défilement d'une barre latérale?

Question

Je suis en train de construire une barre latérale en utilisant bootstrap. J'ai construit la barre, mais quand je fais défiler la page, un espace vide apparaît entre la barre latérale et la barre de navigation. Y at-il de toute façon que je puisse rendre la barre de navigation stationnaire ou remplir l'espace vide lorsque la page est défilée? J'ai inclus des captures d'écran et du code. Normal, before scrolling

After Scrolling

code

ci-dessous:

<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> 

La feuille de style:

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

Je pense que votre question utilise le position:fixed dans la classe css #sidebar-wrapper qui le fait coller à l'endroit positionné sur l'écran sans effet de défilement. Si vous voulez qu'il reste juste en dessous de la barre de navigation, changez-le en position:absolute et votre problème sera résolu. Et si vous voulez qu'il reste en haut et gardez également le fond noir de la barre latérale pour suivre vers le bas puis changez #sidebar-wrapperposition:relative. La meilleure façon de comprendre cela est de comprendre les effets des valeurs de la propriété de position. Voici un lien vers la définition w3schools de la propriété position et ses valeurs avec description.

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

Hope this helps.

Answer 2

Essayez d'ajouter ceci à votre barre latérale wrapper réelle règle CSS:

.sidebar-wrapper{ 
top:0; 
}