以滚动间隔显示或隐藏图像

Question

我正在尝试根据用户的滚动位置显示不同的图像，但似乎无法使最后一部分起作用。 （所有vanillaJS，没有jQ或插件。）

即在iArr [i] （iArr [i] * 2）或类似的东西时删除隐藏的类。

这可能不是最好的解决方案，而是我所知道的唯一方法。

对此有任何想法或建议吗？

var entered, left, visible;

var images = [
  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/70d6bbfc4ec4d0be406bd7a92d6a0c680616d68c/f1b7a/img/birch1.jpg"
  },
  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/75b59ebb394c29c962ecbc77457ca18c02dab4be/bebd9/img/birch2.jpg"
  },

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/bc5b281554d2013bd5f43983d506268622364066/39b1a/img/birch3.jpg"
  },

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/b1c21fcbe2688cae0df5c95b613cd1d15928aac1/8b616/img/birch4.jpg"
  },

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/bbf49ae00cef82d8df2c907f696ac05cafca17a9/e6af0/img/birch5.jpg"
  },
  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/70d6bbfc4ec4d0be406bd7a92d6a0c680616d68c/f1b7a/img/birch1.jpg"
  },
  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/75b59ebb394c29c962ecbc77457ca18c02dab4be/bebd9/img/birch2.jpg"
  },

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/bc5b281554d2013bd5f43983d506268622364066/39b1a/img/birch3.jpg"
  },

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/b1c21fcbe2688cae0df5c95b613cd1d15928aac1/8b616/img/birch4.jpg"
  },

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/bbf49ae00cef82d8df2c907f696ac05cafca17a9/e6af0/img/birch5.jpg"
  }
  ,

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/b1c21fcbe2688cae0df5c95b613cd1d15928aac1/8b616/img/birch4.jpg"
  },

  {
    src:
      "https://d33wubrfki0l68.cloudfront.net/bbf49ae00cef82d8df2c907f696ac05cafca17a9/e6af0/img/birch5.jpg"
  }
];

//Add images array to inner div
var inner = document.getElementById("inner");
//Add unique classes to images
images.forEach(function(el, idx) {
  var img = document.createElement("img");
  img.src = el.src;
  img.classList.add("img", "hidden", "img-" + idx);
  // console.log(img)
  inner.appendChild(img);
});


window.addEventListener("scroll", function(e) {
  var rx = inner.getBoundingClientRect();
  //console.log(rx.height)
  var imgCount = images.length;//12
  //console.log(imgCount)

  //Get the viewport height and divide by total number of images
  var scrollImageBottom = rx.height / imgCount;
  var interval = rx.height / images.length;
  //console.log(interval)
  var newArr = [];

  for (var i = 1; i <= imgCount; i++) {
    newArr.push(i*interval);
    //newArr.reverse();
  }
  var iArr = newArr.reverse();
  console.log(iArr);
  console.log(rx.top);
  
  //Something like this
  
  // if ( iArr[i] < rx.top && iArr[i] > (iArr[i]*2) ) {
  //   iArr[i].node. removeClass('hidden');
  // }
  // else {
  //   iArr[i].node.addClass('hidden')
  // }

  
  if (rx.top <= rx.height && rx.bottom >= 0 && !entered) {
    entered = true;
    console.log("in viewport");
  }

  if (
    (rx.bottom <= rx.height && rx.bottom <= 0 && !left) ||
    (rx.top >= rx.height && rx.bottom <= 0 && !left)
  ) {
    left = true;
    entered = false;
    visible = false;
    console.log("left viewport");
  }
});

body{
  margin:0;
}
.hidden{
  display:none;
}
.wrapper{
  height: 400vh;
}
.inner{
  height: 100vh;
  width: 100vw;
  position:absolute;
  top:150vh;
  background:red;
  border:2px solid red;
}
.img{
  position: absolute;
  width:auto;
  height:100vh;
}

<div class="wrapper">
  <h1>Scroll down and check console</h1>
  <div id="inner" class="inner">
  </div>
  
</div>