Question

我正在尝试创建一个网页，用户可以滚动浏览多个全屏图像，这些图像覆盖了看似固定的HTML元素（不在滚动上移动）。

在我的小提琴中，你可以看到我目前的文字位于绝对位置并且相对于父级移动。相反，我想将文本放在我希望它出现在每个背景图像上的位置，然后当用户向下滚动时，文本保持固定，然后被下一部分覆盖/揭开（取决于方向）。

我确实尝试使用position: fixed和z-index值但是当我希望固定元素只能用自己的幻灯片可见时，我总能看到固定元素。

使用图像文件添加文本不符合我的要求，因为最终我希望动态文本和视频元素位于这些固定元素中。非常感谢您的见解。

Answer 1

使用纯css无法做到这一点。请看这个片段。

$(window).scroll(function() {
  $("section .cover-text").each(function() {
    var marginTop = $(window).scrollTop() - $(this).parent().position().top;
    $(this).css({
      'margin-top': marginTop
    });
  });
});

#slide-1,
#slide-2,
#slide-3 {
  position: relative;
  overflow: hidden;
}

.cover-1,
.cover-2,
.cover-3 {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
}

.cover-1 {
  background-image: url('http://placekitten.com/800/350');
  z-index: 3000;
}

.cover-2 {
  background-image: url('http://placekitten.com/g/800/350');
}

.cover-3 {
  background-image: url('http://placekitten.com/800/355');
}

.cover-text {
  font-size: 25px;
  color: #FFFFFF;
  text-shadow: 0 0 30px #000000;
  position: absolute;
  left: 20%;
  top: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="slide-1">
  <div class="cover-1"></div>
  <div class="cover-text">Title 1</div>
</section>
<section id="slide-2">
  <div class="cover-2"></div>
  <div class="cover-text">Title 2</div>
</section>
<section id="slide-3">
  <div class="cover-3"></div>
  <div class="cover-text">Title 3</div>
</section>

滚动固定背景图像时，是否可以使文本看起来固定？

1 个答案: