Question

我想在页面上的相同位置放置一系列固定元素，并让其父母滚动查看以使其可见。

到目前为止，我有以下内容：https://codepen.io/porgeet/pen/ywZgyq

.parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

<div class="main">
  <div class="parent one">
    <div class="child">One</div>
  </div>
  <div class="parent two">
    <div class="child">Two</div>
  </div>
  <div class="parent three">
    <div class="child">Three</div>
  </div>
</div>

问题

溢出的父对象似乎只会影响后面的div，而不是前面的div。

我的目标是展示一个，然后展示两个，然后展示三个。

任何帮助将不胜感激。

Answer 1

overflow:hidden在您的情况下将无济于事，因为您已将元素固定为¹。您面临的是绘画顺序的逻辑结果，因为您没有指定任何z-index，因此第二个position:relative元素将被绘制在第一个position:fixed之上，因此这就是为什么第二个背景将隐藏第一个标题，依此类推。

使用position:fixed将无法实现这一目标，因为您的代码几乎等同于下面的代码，其中父元素和子元素之间没有更多关系。

.parent,
.child{
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  text-align:center;
  overflow: hidden;
  width:100%;
}

.one {
  background: pink;
}
.one + .child {  
color: green;
}

.two {
  background: aquamarine;
}
.two + .child {
  color: blue;
 }

.three {
  background: pink;
}
.three + .child {
  color: red;
}
.child {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>

我认为，达到所需效果的唯一方法是考虑一些JS。这是一个更简单的想法，您可以考虑使position:absolute能够使用overflow:hidden：

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--t', scroll+"px");
}

.parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top:var(--t,0);
}

.two .child {
  top: calc(50% - 100vh);
}

.three .child {
  top: calc(50% - 200vh);
}

<div class="parent one">
  <div class="child">One</div>
</div>
<div class="parent two">
  <div class="child">Two</div>
</div>
<div class="parent three">
  <div class="child">Three</div>
</div>

诀窍是使用窗口滚动来调整边距，以相同的方式移动所有元素，并首先将它们放置在屏幕中的同一位置，这就是为什么我将100vh和200vh添加到将元素向上移动。

我们还可以调整翻译：

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--t', scroll+"px");
}

.parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + var(--t,0px)));
}

.two .child {
  top: calc(50% - 100vh);
}

.three .child {
  top: calc(50% - 200vh);
}

body {
 margin:0;
}

<div class="parent one">
  <div class="child">One</div>
</div>
<div class="parent two">
  <div class="child">Two</div>
</div>
<div class="parent three">
  <div class="child">Three</div>
</div>

¹此属性指定块容器元素的内容溢出元素框时是否被裁剪。它会影响元素的所有内容的裁剪，包含块是视口或元素祖先的任何后代元素（及其各自的内容和后代）除外。< sup> ref

固定定位是绝对定位的子类别。唯一的区别是，对于固定位置的框，t 包含块的框是由视口建立的。。^ref

固定位置的子代，溢出隐藏的父代。仅隐藏底部

1 个答案: