如何使网站的所有部分都具有滚动效果？(How do I make all sections of a website have the scroll

我目前正在开发一个网站，并希望对我网站的不同部分有一个“滚动”效果。 如果您不知道“滚动”效果的含义，请访问https://sevenbits.github.io/Mac-Linux-USB-Loader/并稍微向下滚动。 后继部分滚动它们的前辈，当它们到达顶部时它们变得固定。

我试图找出如何对每个部分，而不仅仅是最重要的部分。 如果这可能是一个很短的代码，那将是很好的，但如果它很多，它也会没问题。

提前致谢！

I'm currently working on a website and wanted to have a "scroll-over" effect for the different sections of my website. If you don't know what I mean by the "scroll-over" effect, please visit https://sevenbits.github.io/Mac-Linux-USB-Loader/ and scroll down slightly. The successor sections scroll over their predecessors, which become fixed when they reach the top.

I'm trying to figure out how to do this with every section, and not only the top one. It would be great if this could be a short amount of code, but it would also be OK if it was a lot.

Thanks in advance!

最满意答案

* {
  padding: 0;
  margin: 0;
}
body {
  position: relative;
}
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 20vh;
  background-color: #446;
  z-index: 100;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.splash {
  position: fixed;
  left: 0;
  top: 20vh;
  width: 100vw;
  height: 100vh;
  background-color: #8ef;
  z-index: 0;
}
.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin-top: 80vh;
  background-color: #fff;
  z-index: 50;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
}   
  
<header>
  <div class="navbar"></div>
  <div class="splash"></div>
</header>
<div class="container"></div> 
  
 
 
 
  
  
* {
  padding: 0;
  margin: 0;
}
body {
  position: relative;
}
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 20vh;
  background-color: #446;
  z-index: 100;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.splash {
  position: fixed;
  left: 0;
  top: 20vh;
  width: 100vw;
  height: 100vh;
  background-color: #8ef;
  z-index: 0;
}
.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin-top: 80vh;
  background-color: #fff;
  z-index: 50;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
}   
  
<header>
  <div class="navbar"></div>
  <div class="splash"></div>
</header>
<div class="container"></div>