动态定位 div 低于固定位置 div

Question

我正在尝试根据顶部第一个 div（英雄）的高度动态垂直定位第二个粉红色 div，然后在其上方滚动。

目前有以下代码：

body {
  margin: 0px;
  font-family: helvetica;
}

h1 {
  font-size: 4rem;
  text-transform: uppercase;
  color: yellow;
}

.hero {
  position: fixed;
  z-index: 0;
  background: grey;
  padding: 40px;
  top: 0;
}
.block {
  background: pink;
  height: 90vh;
  position: relative;
  z-index: 0;
  padding: 40px;
  margin-top: 90vh;
}
h2 {
  font-size: 3rem;
}

<div class="hero">
  <h1>Intro block to be fixed position and under all other content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h1>
</div>

<div class="block">
    <h2>Second block to be position below the hero block and overlay on scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h2>
</div>

CSS

有没有聪明的方法来做到这一点

Answer 1

sticky 在这里可以提供帮助：

body {
  margin: 0px;
  font-family: helvetica;
}

h1 {
  font-size: 1rem;
  text-transform: uppercase;
  color: yellow;
}

.hero {
  position: sticky;
  background: grey;
  padding: 40px;
  top: 0;
}
.block {
  background: pink;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  padding: 40px;
}
h2 {
  font-size: 3rem;
}

<div class="hero">
  <h1>Intro block to be fixed position and under all other content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h1>
</div>

<div class="block">
    <h2>Second block to be position below the hero block and overlay on scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h2>
</div>

Answer 2

这似乎是一个持续存在的问题，在 iOS、Chrome 和 Safari

中无法正常工作

动态定位 div 低于固定位置 div

Dynamically position div below a fixed position div

css

css-position