Show different images, based on percentage of page scrolled

Question

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>

could you provide a https://stackoverflow.com/help/minimal-reproducible-example for us to use and help you with :) — Patrick Hume, Jul 02 '22 at 16:26

Patrick Hume · Accepted Answer · 2022-07-03T19:46:54.383

Ah, I see now ok, so I believe this should work for you, it uses the methods from

javascript scroll event for iPhone/iPad?

I tested it using browserstack.com's mobile emulators on android and Iso and both seemed to work

$("#c1").fadeIn(500);
//use touch move for ISO mobile
window.addEventListener("touchmove", Scroll, false);
window.addEventListener("scroll", Scroll, false);

function Scroll() {
  var windowHeight = jQuery(document).height();
  //Capture where the top of the page is after scroll
  var currentPosition = jQuery(document).scrollTop();
  //Capture how many pixels can be viewed by the user
  var windowViewingArea = jQuery(window).height();
  //Figure out the bottom of what the user has scrolled to
  var bottomScrollPosition = currentPosition + windowViewingArea;
  //Figure out the rounded percentage of how much was scrolled
  var percentScrolled = parseInt((bottomScrollPosition / windowHeight * 100).toFixed(0));
  //console.log(percentScrolled)
  if (percentScrolled >= 15 && percentScrolled < 30) {
    hideAll("c1");
    $("#c1").fadeIn(500);
  } else if (percentScrolled >= 30 && percentScrolled < 45) {
    hideAll("c2");
    $("#c2").fadeIn(500);
  } else if (percentScrolled >= 45 && percentScrolled < 60) {
    hideAll("c3");
    $("#c3").fadeIn(500);
  } else if (percentScrolled >= 60 && percentScrolled < 75) {
    hideAll("c4");
    $("#c4").fadeIn(500);
  } else if (percentScrolled >= 75 && percentScrolled < 90) {
    hideAll("c5");
    $("#c5").fadeIn(500);
  } else if (percentScrolled >= 90) {
    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>

Is this what you were after ?

that's ok, no need to apologize, I was the one who was slow on the up take, so if anything I should be the one to apologize for making you wait so long for an answer;... so yer sorry about that, anyway I'm glad it works ok :) — Patrick Hume, Jul 04 '22 at 01:05

score 0 · Answer 2 · answered Jul 03 '22 at 09:47

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

thanks @Patrick Hume - my problem is not a cross-browser issue, the problem is that on mobile, the height of a page has many more pixels than on a desktop - so i am wanting a solution that changes images based on the percentage of a page scrolled. — kylie2675647, Jul 03 '22 at 11:17

Show different images, based on percentage of page scrolled

2 Answers2