滚动文本时在背景中显示图像

Question

我创建了一个效果，就是在滚动文本的同时不断地显示图像。我有一个问题，如何让它以同样的方式工作，而不是position: sticky，posititon: fixed，这样这个效果就可以在ie上工作了。

​

var sticky = document.querySelector('.sticky-container');
var img = document.querySelector('.sticky-item');
window.addEventListener('scroll',setSticky);        
function setSticky(){
  var top = sticky.offsetTop - window.pageYOffset;
  if(top <= 0){
    sticky.classList.add('sticky');
  }
  if(top.toString().replace('-','') >= sticky.offsetHeight || top >= 0){
    sticky.classList.remove('sticky');
  }
};

* {
  margin: 0;
}
body {
  width: 100%;
  padding: 120vh 0;
}
p {
  font-size: 28px;
  color: #fff;
  text-align: center;
  margin: 80px 0;
}
.sticky-item {
  width: 100%;
  height: 100vh;
  background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}
.sticky-container.sticky .sticky-item{
  position: sticky;
  top: 0;
  z-index: -1;
}

<div class="sticky-container">
  <figure class="sticky-item"></figure>
  <p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
  <p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
  <p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>

​

Answer 1

编辑：

<div class="sticky-container">

  <p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
  <p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
  <p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>

  </div>


  .sticky-item {
  background-attachment: fixed;
  background-size: 100%;
  }

Dai是正确的，您不需要使用脚本来实现此效果。

https://jsfiddle.net/tractionworks/h3r5uvqm/8/

Answer 2

由于你需要使用position:sticky特性，我怀疑如果不花大力气并实际使用JS，这在IE上是不会起作用的。但是对于1.4% global usage，我怀疑这是否值得你花时间。

但是，如果您对sticky的覆盖范围感到满意，我将完全跳过使用JS，并通过CSS解决它：

​

* {
  margin: 0;
}
body {
  width: 100%;
  padding: 120vh 0;
}
p {
  font-size: 28px;
  color: #fff;
  text-align: center;
  margin: 80px 0;
}
.sticky-item {
  position: sticky;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}

<div class="sticky-item"></div>
<div class="sticky-container">
  <p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
  <p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
  <p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>

​