Отображение изображения в фоновом режиме при прокрутке текста

Question

Я создаю эффект, который заключается в постоянном отображении изображения при прокрутке текста. У меня есть вопрос, как заставить его работать так же, вместо положения: 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%;
  }

Дай правильно, вам не нужно использовать сценарий для достижения этого эффекта.

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

Answer 2

Поскольку вам нужно использовать функцию position:sticky, я сомневаюсь, что она работает на IE без особых усилий и фактически использует JS. Но при 1,4% общемировом использовании Я сомневаюсь, что это стоит вашего времени.

Однако, если вас устраивает охват 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>