html - 我怎样才能使侧边栏粘住？

Question

目前，我已将边栏显示在“申请”页面开始的位置。当用户继续向下滚动时，我希望侧边栏保持在该位置。另一件让我感到困惑的事情是，当我将栏的位置设置为“绝对”时，它就完全消失了。为什么会这样？

CSS:

#navbar {
    background-color: black;
    overflow: auto;
    height: 100%;
    width: 25%;
    z-index: 1000;
    float: right;
}

#navbar-links {
    list-style-type: none;
    display: block;
}

#apply {
    background-color: red;
}

#about {
    background-color: orange;
}

#sponsor {
    background-color: green;
}

HTML:

<div id="pages">
    <!-- apply page -->
    <div id="apply" class="sections" tabindex='2'>
        <!-- navigation bar -->
        <div id="navbar">
            <ul id="navbar-links">
                <li>Apply</li>
                <li>About</li>
                <li>Sponsor</li>
            </ul>
        </div>
        <div class="container">

        </div>  
    </div>

    <!-- about page -->
    <div id="about" class="sections" tabindex='3'>
        <div class="container">

        </div>        
    </div>

    <!-- sponsor page -->
    <div id="sponsor" class="sections" tabindex='4'>
        <div class="container">

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

Answer 1

您需要使用position: fixed 固定 View 的位置。

然后您可以使用:top right left 和 bottom 将元素放在您想要的位置是。所以 right: 0; 和 top: 0; 将元素从右边和顶部放置 0px。

对于绝对位置也是如此，如果你没有使用任何可能是它消失的原因。

有关 css 位置属性的更多详细信息，请参见此处:http://www.w3schools.com/cssref/pr_class_position.asp

#navbar {
    position: fixed;
    right: 0;
    top: 0;
    background-color: black;
    color: white;
    overflow: auto;
    height: 100%;
    width: 25%;
    z-index: 1000;
}

#navbar-links {
    list-style-type: none;
    display: block;
}

#apply {
    background-color: red;
}

#about {
    background-color: orange;
}

#sponsor {
    background-color: green;
}

<div id="pages">
    <!-- apply page -->
    <div id="apply" class="sections" tabindex='2'>
        <!-- navigation bar -->
        <div id="navbar">
            <ul id="navbar-links">
                <li>Apply</li>
                <li>About</li>
                <li>Sponsor</li>
            </ul>
        </div>
        <div class="container">

        </div>  
    </div>

    <!-- about page -->
    <div id="about" class="sections" tabindex='3'>
        <div class="container">

        </div>        
    </div>

    <!-- sponsor page -->
    <div id="sponsor" class="sections" tabindex='4'>
        <div class="container">

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