Change image on scroll

by Dedi Wibisono

HTML

<div id="c1" class="image"><img src="http://placekitten.com/200/140" style="width:40vh" /></div>
<div id="c2" class="image"><img src="http://placekitten.com/200/122" style="width:40vh" /></div>
<div id="c3" class="image"><img src="http://placekitten.com/200/143" style="width:40vh" /></div>
<div id="c4" class="image"><img src="http://placekitten.com/200/134" style="width:40vh" /></div>
<div id="c5" class="image"><img src="http://placekitten.com/200/145" style="width:40vh" /></div>
<div id="c6" class="image"><img src="http://placekitten.com/200/136" style="width:40vh" /></div>

CSS

body,
html {
  margin: 0;
}

.image {
  display: none;
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

JavaScript

$(document).ready(function() {
  
  let imgSpace = 300;
  !imgSpace && imgSpace++;

  $(window).resize(function() {
    $("body").css(
      "height",
      $(window).height() + imgSpace * ($(".image").length - 1) + "px"
    );
  });

  $(window).trigger("resize");

  $("#c1").fadeIn(0);

  $(".image").click(function() {
    let NxtIMG = Math.trunc($(document).scrollTop() / imgSpace) + 1;
    NxtIMG >= $(".image").length && (NxtIMG = 0);
    $(window).scrollTop(NxtIMG * imgSpace);
  });

  $(window).scroll(function() {
    var pos = $(document).scrollTop();
    console.log(pos);
    hideAll("c" + (Math.trunc(pos / imgSpace) + 1));
    $("#c" + (Math.trunc(pos / imgSpace) + 1)).fadeIn(0);
  });

  function hideAll(exceptMe) {
    $(".image").each(function(i) {
      if ($(this).attr("id") == exceptMe) return;
      $(this).fadeOut(200);
    });
  }
});