用CSS修复页面顶部的div

Question

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

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

我希望在向下滚动后可以看到div #bar和#two。我尝试了一切：给予边距，填充，位置相对，绝对，添加到#one top：15vh;。尝试将div放在#one和#two divs上......制作所有组合..

这是我到目前为止的代码，它最接近我的意思，无法找到如何进一步推进

* {
  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>