css - 位置 : fixed with vertical space

Question

我遇到的是 position: fixed 的一个相当基本的问题。

这是一个示例:

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 50px;
    background: #000;
    position: fixed;
}

.content {
    background: #ccc;
    width: 100%;
    height: 5000px;
}

<div class="nav"></div>
<div class="content">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div>

我想要的是从黑条下方开始的滚动(具有固定位置)。

Answer 1

向第二个 div 添加等于第二个 div 高度的内边距。

.content {
    padding-top: 50px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

当您说滚动到后退栏下方时，听起来您希望内容 从后退栏下方开始。因此，向第二个 div 添加一些填充以说明固定 div 的存在。