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); }
  if (pos > 6000 && pos < 6500) { hideAll("c7"); $("#c7").fadeIn(500); }
  if (pos > 7000 && pos < 7500) { hideAll("c8"); $("#c8").fadeIn(500); }
  if (pos > 8000 && pos < 8500) { hideAll("c9"); $("#c9").fadeIn(500); }
  if (pos > 9000 && pos < 9500) { hideAll("c10"); $("#c10").fadeIn(500); }
  if (pos > 10000 && pos < 10500) { hideAll("c11"); $("#c11").fadeIn(500); }
  if (pos > 11000 && pos < 11500) { hideAll("c12"); $("#c12").fadeIn(500); }
  if (pos > 12000 && pos < 12500) { hideAll("c13"); $("#c13").fadeIn(500); }
  if (pos > 13000 && pos < 13500) { hideAll("c14"); $("#c14").fadeIn(500); }
  if (pos > 14000 && pos < 14500) { hideAll("c15"); $("#c15").fadeIn(500); }
});
function hideAll(exceptMe) {
  $(".bg").each(function (i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}