位置:固定垂直空间

Question

我所拥有的是一个相当基本的位置问题:固定.

这是一个示例:

* {
    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的存在.

Answer 2

这是实现此目的的更灵活的方法，不需要知道固定 div 的高度（尽管语义较少）。

只需复制固定元素的标记即可。设置的position第一重复的对向的fixed并且visibility所述第二到的hidden（也确保position所述第二元件的未设置或relative）。下面是一个例子：

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

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

<div class="nav fixed"></div>
<div class="nav filler"></div>
<div class="content">
  
  First<br />
  Second<br />
  Third<br />
  Fourth<br />
  Fifth<br />
  Sixth<br />
  Seventh<br />
  Eigth<br />
  Ninth<br />
  
  <br /><br /><br /><br />
  <br /><br /><br /><br />
  <br /><br /><br /><br />

  Last<br />

</div>