How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed?
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>