视差滚动 - 滚动到指定的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>

我将标题移到了折叠之外并给它一个更高的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>

我已将主要高度设为与页面高度减去标题高度相同。使用calc