CODEWITHSUNDEEP
javascripthtmlcssanimation
user13448288
user13448288

Reputation:

Displaying the image in the background when scrolling text

I create an effect that is to constantly display the image while scrolling text. I have a question how to make it work the same way, instead of position: sticky, posititon: fixed, so that this effect works on 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>

Upvotes: 0

Views: 84

Answers (2)

EdgarAlexPoe
EdgarAlexPoe

Reputation: 418

EDIT:

<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 is correct, you do not need to use a script to achieve this effect.

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

Upvotes: 1

onewaveadrian
onewaveadrian

Reputation: 453

Since you need to use the position:sticky feature I doubt this works on IE without a big effort and actually using JS. But with 1.4% global usage I doubt this is worth your time.

However if you are fine with the coverage of sticky, I would entirely skip using JS and solve it via 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>

Upvotes: 0

Related Questions