javascript - 我有一个js出现效果问题

Question

这是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);

标签： javascriptjquerycsseventsscroll

Answer 1

如果他们都需要出现在同一个地方，那么每个人不应该使用相同的条件吗？

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');
}