视差滚动 - 滚动到指定的 div

Question

我使用 css 设置了视差效果：JS Fiddle

代码：

body {
  margin: 0px;
}
header {
  height: 218px;
  background: blue;
}
#fold {
  background: red;
  height: 100vh;
  width: 100%;
  position: fixed;
}
main {
  background: green;
  position: relative;
  top: 100vh;
  height: 1000px;
}

<div id="fold">
  <header>header</header>
  fold content
</div>
<main>main content here</main>

目前，'main' div 滚动到主体的顶部，但是有什么方法可以让它在碰到 'header' 标签时停止吗？

我希望这是有道理的。感谢阅读，感谢您的建议。

Answer 1

你的意思是这样的吗？

body {
  margin: 0;
}
#fold,
header {
  width: 100%;
  position: fixed;
}
header {
  height: 218px;
  background: #00f;
  top: 0;
  left: 0;
  z-index: 1;
}
#fold {
  background: red;
  height: calc(100vh - 218px);
  top: 218px;
}
main {
  background: green;
  position: relative;
  top: 100vh;
  height: 1000px;
}

<header>header</header>
<div id="fold">fold content</div>
<main>main content here</main>

我将 header 移到折叠外并给了它更高的 z-index。

编辑

已更新以符合条件

body {
  margin: 0px;
}
header {
  height: 218px;
  background: blue;
}
#fold {
  background: red;
  height: 100vh;
  width: 100%;
  position: fixed;
}
main {
  background: green;
  position: relative;
  top: 100vh;
  height: calc(100vh - 218px);
}

<div id="fold">
  <header>header</header>
  fold content
</div>
<main>main content here</main>

我已经让 main 的高度等于页面高度减去 header 的高度。使用 calc

视差滚动 - 滚动到指定的 div

Parallax Scroll - scroll to a specified div

jquery

css

parallax