I’m looking to fade-in different images, based on the percentage of the total page scrolled. The idea is that an image is shown at an even interval along the entire page.

Right now, I have the following code which is based on the amount of pixels scrolled. But since this doesn’t work on different devices, it is not suited for my idea. Would anyone know how to pick up on what I have below and make it percentage of the entire page?

Thank you!

    $("#c1").fadeIn(500);
    $(document).scroll(function () {
      var pos = $(document).scrollTop();
      if (pos < 500) { hideAll("c1"); $("#c1").fadeIn(500); }
      if (pos > 1000 && pos < 1500) { hideAll("c2"); $("#c2").fadeIn(500); }
      if (pos > 2000 && pos < 2500) { hideAll("c3"); $("#c3").fadeIn(500); }
      if (pos > 3000 && pos < 3500) { hideAll("c4"); $("#c4").fadeIn(500); }
      if (pos > 4000 && pos < 4500) { hideAll("c5"); $("#c5").fadeIn(500); }
      if (pos > 5000 && pos < 5500) { hideAll("c6"); $("#c6").fadeIn(500); }
    });
    function hideAll(exceptMe) {
      $(".bg").each(function (i) {
        if ($(this).attr("id") == exceptMe) return;
        $(this).fadeOut();
      });
    }
body {height:9500px;}
.bg{width:25%;z-index:-1;display:none;position:fixed;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}
.bg img{max-height:100%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
  <div id="c1" class="bg" style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
  <div id="c2" class="bg"><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
  <div id="c3" class="bg"><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
  <div id="c4" class="bg"><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
  <div id="c5" class="bg"><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
  <div id="c6" class="bg"><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>

3

you could use the document scroll event which has cross-browser support:

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#browser_compatibility

here is your code using that method:

$("#c1").fadeIn(500);
document.addEventListener('scroll', function(e) {
  var pos = window.scrollY;
  if (pos < 500) {
    hideAll("c1");
    $("#c1").fadeIn(500);
  }
  if (pos > 1000 && pos < 1500) {
    hideAll("c2");
    $("#c2").fadeIn(500);
  }
  if (pos > 2000 && pos < 2500) {
    hideAll("c3");
    $("#c3").fadeIn(500);
  }
  if (pos > 3000 && pos < 3500) {
    hideAll("c4");
    $("#c4").fadeIn(500);
  }
  if (pos > 4000 && pos < 4500) {
    hideAll("c5");
    $("#c5").fadeIn(500);
  }
  if (pos > 5000 && pos < 5500) {
    hideAll("c6");
    $("#c6").fadeIn(500);
  }
});

function hideAll(exceptMe) {
  $(".bg").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}
body {
  height: 9500px;
}

.bg {
  width: 25%;
  z-index: -1;
  display: none;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.bg img {
  max-height: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
  <div id="c1" class="bg" style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
  <div id="c2" class="bg"><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
  <div id="c3" class="bg"><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
  <div id="c4" class="bg"><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
  <div id="c5" class="bg"><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
  <div id="c6" class="bg"><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>

what browsers/devices are you having issues with? do you need help doing the image swapping based on the % of the page scrolled?

I hope this helps