使用侧栏滚动时如何防止空格？

Question

我目前正在使用Bootstrap构建侧边栏。 我已经建立了栏，但是当我向下滚动页面时，侧栏和导航栏之间会出现空白。 无论如何，当向下滚动页面时，是否可以使导航栏保持静止或填充空白？ 我包括了屏幕截图和代码。 正常，滚动之前

滚动后

代码如下：

<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

我认为您的问题使用的是position:fixed在#sidebar-wrapper css类中，这导致它粘在屏幕上的位置，而没有滚动影响。 如果您希望它停留在顶部导航栏的正下方，则将其更改为position:absolute ，您的问题将有望得到解决。 而且，如果您希望它固定在顶部，并同时保持侧边栏的黑色背景一直走到底部，请更改#sidebar-wrapper position:relative 。

理解这一点的最佳方法是了解position属性值的影响。 以下是w3schools职位属性定义及其值和说明的链接。

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

希望这可以帮助。

Answer 2

尝试将其添加到实际的sidebar-wrapper CSS规则中：

.sidebar-wrapper{
top:0;
}