Question

我有一个垂直滚动页面，其中包含3个不同的部分，一个接一个地显示。每个标题的宽度和高度均为100％，并且标题的居中位置固定。

在同一页面中，还有一个DIV“ .centered-container”，其位置固定，宽度为100％，高度为100px。该DIV在窗口内垂直居中。

我想做的是：

每次一个节越过居中的DIV时，我都会在该节中添加“活动”类，并在其顶部到达DIV时显示其标题。并删除该类，并在该部分底部离开DIV时隐藏标题。

问题是当我开始滚动窗口时，我所有的部分都具有“活动”类。

以下是复制代码：

HTML

ValueError: save() prohibited to prevent data loss due to unsaved related object master

CSS

<div class="centered-container"></div>

<div class="hero active" style="background:red;">
  <div class="title">Title 1</div>
</div>

<div class="hero" style="background:green;">
  <div class="title">Title 2</div>
</div>

<div class="hero" style="background:blue;">
  <div class="title">Title 3</div>
</div>

JS

.centered-container {
  position: fixed;
  width: 100%;
  height: 100px;
  top: calc(50% - 50px);
  left: 0;
  background: black;
}

.hero {
  width: 100%;
  height: 100vh;
}

.title {
  display: none;
  position: fixed;
  width: 100%;
  top: 50%;
  color: #fff;
  font-size: 50px;
  text-align: center;
  transform: translateY(-50%);
}

.hero.active .title {
  display: block;
}

以下是具有欲望效果的网站链接：Example

预先感谢您的帮助！

跨越固定元素时显示每个部分的标题

0 个答案: