html - 使用 CSS 在页面顶部固定一个 div

Question

是否可以在页面顶部固定一个 div 栏，即使在滚动时也是如此，并且 仍然能够完全看到下一个 div？

条形 div 的高度为 15vh，其他 div 设置为 85，因此当您看到页面的第一个 View 时，将显示 #bar 和 #one。

我希望在向下滚动后看到 div #bar 和 #two。我尝试了一切:给边距、填充、相对位置、绝对位置、添加到#one top: 15vh;。还尝试将 div 放在#one 和#two div 上.. 进行所有组合..

这是我目前的代码，最接近我的意思，但找不到进一步的方法

* {
  margin: 0;
  padding: 0;
}

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#bar {
  background-color: gray;
  height: 15vh;
  position: fixed;
  width: 1000px;
}

#one {
  background-color: blue;
  height: 85vh;
}

#two {
  background-color: red;
  height: 85vh;
}

<div id="container">


  <div id="bar"></div>

  <div id="one"></div>

  <div id="two"></div>

</div>

Answer 1

将 padding-top:15vh; 添加到 #one 以创建/添加隐藏在固定导航栏后面的部分

* {
  margin: 0;
  padding: 0;
}

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#bar {
  background-color: gray;
  height: 15vh;
  position: fixed;
  width: 1000px;
}

#one {
  background-color: blue;
  padding-top:15vh;
  height: 85vh;
}

#two {
  background-color: red;
  height: 85vh;
}

<div id="container">


  <div id="bar"></div>

  <div id="one"></div>

  <div id="two"></div>

</div>