我有一个js出现效果问题

如何解决我有一个js出现效果问题

这是js，当我向下滚动时，应该一次出现4篇文章，但是在第2号书本之后不起作用。我怎么了？

function scrollAppear(){
var main = document.querySelector("main");
var art = main.querySelectorAll("article");

var artPos1 = art[0].getBoundingClientRect().top;
var artPos2 = art[1].getBoundingClientRect().top;
var artPos3 = art[2].getBoundingClientRect().top;
var artPos4 = art[3].getBoundingClientRect().top;
var artPos5 = art[4].getBoundingClientRect().top;


var screenPos = window.innerHeight /1.3;


if (artPos1>600 && artPos1<700) {
    art[0].classList.add('appear');
}
else if (artPos2<500) {
    art[1].classList.add('appear');
}
else if (artPos3<800) {
    art[2].classList.add('appear');
}
else if (artPos4<600) {
    art[3].classList.add('appear');
}
else if (artPos5<600) {
    art[4].classList.add('appear');
}

}
window.addEventListener('scroll',scrollAppear);

解决方法

如果它们都需要出现在相同的位置，那么每个人都不应该使用相同的条件吗？

if (artPos1>600 && artPos1<700) {
    art[0].classList.add('appear');
}
else if (artPos2>600 && artPos2<700) {
    art[1].classList.add('appear');
}
else if (artPos3>600 && artPos3<700) {
    art[2].classList.add('appear');
}
else if (artPos4>600 && artPos4<700) {
    art[3].classList.add('appear');
}
else if (artPos5>600 && artPos5<700) {
    art[4].classList.add('appear');
}

,

考虑以下jQuery示例。

function scrollAppear() {
  var main = $("#main");
  var art = $("article");

  var screenPos = $(window).scrollTop();

  art.each(function(i,el) {
    if (screenPos >= $(el).css("top").slice(0,-2) - 120) {
      $(el).fadeIn(100).addClass("appear");
    }
  });

}

window.addEventListener('scroll',scrollAppear);

#main {
  position: relative;
  height: 2000px;
}

article {
  width: 100%;
  height: 100px;
  position: absolute;
  display: none;
}

.red {
  background: #F00;
  top: 600px;
}

.orange {
  background: #F60;
  top: 700px;
}

.yellow {
  background: #FF0;
  top: 800px;
}

.green {
  background: #0F0;
  top: 900px;
}

.blue {
  background: #00F;
  top: 1000px;
}

.purple {
  background: #F0F;
  top: 1100px;
}

.appear {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <article class="red">
  </article>
  <article class="orange">
  </article>
  <article class="yellow">
  </article>
  <article class="green">
  </article>
  <article class="blue">
  </article>
  <article class="purple">
  </article>
</div>

您可以使用.scrollTop()：

获取匹配元素集中第一个元素的滚动条的当前垂直位置，或为每个匹配元素设置滚动条的垂直位置。

https://api.jquery.com/scrolltop/

使用.each()遍历每个元素，并在滚动超过屏幕上适当的阈值时显示它。