Question

我目前正在一个网站上工作，并希望有一个＆＃34;滚动＆＃34;对我网站的不同部分有影响。如果你不知道我的意思是＆＃34;滚动＆＃34;效果，请访问https://sevenbits.github.io/Mac-Linux-USB-Loader/并稍微向下滚动。后继部分滚动它们的前辈，当它们到达顶部时变得固定。

我试图弄清楚如何对每个部分进行此操作，而不仅仅是最重要部分。如果这可能只是一小段代码，那将会很棒，但如果它很多的话也会没问题。

提前致谢！

Answer 1

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

如何使网站的所有部分都具有滚动效果？

1 个答案: