Javascript 如何根据窗口高度在卷轴上显示单个li元素

我正试图根据页面向下滚动的距离，为我的每个

LI

元素添加一个类

如果我的视口高度为

2000px

，则第一个

li

应在

500px

之后添加类“

.active

”。然后再向下滚动一次

500px

，第二个

LI

应已应用类“

active

”，前一个

LI

应已删除该类，依此类推

JavaScript应该根据视口的高度计算像素，因为我并不总是知道页面有多高

我知道使用jquery和一些（每个）是可能的，但我不知道如何以及从哪里开始。非常感谢您的帮助。：-）

.wrapper{
最小高度：2000px；
}
.标题{
位置：固定；
宽度：100%；
背景：#eee；
右：0；
左：0；
排名：0；
}
保险商实验室{
位置：相对位置；
列表样式：无；
高度：35px；
保证金：0；
填充：0；
}
李{
位置：绝对位置；
可见性：隐藏；
不透明度：0；
过渡：所有。2轻松；
转化：translateY（100%）；
线高：35px；
保证金：0；
填充：0 20px；
}
李：很活跃{
变换：translateY（0）；
不透明度：1；
能见度：可见；
}

在500像素的阈值后，我将可见
当用户滚动时，我应该可见（页面高度-500px/4）
当用户滚动（页面高度-500px/4）*2时，我应该可见
当用户滚动（页面高度-500px/4）*3时，我应该可见

您可以使用本机浏览器事件检查当前滚动位置，根据滚动范围更新所需的“li”

window.onscroll = function(args) {
   console.log(document.body.scrollTop);

   if(document.body.scrollTop > 200 && document.body.scrollTop < 300) {
      document.getElementsByClassName('active')[0].className.replace('active', '');
      document.getElementsByTagName('li')[next].className += ' active';
   }
};

window.onscroll=函数（args）{
console.log（document.body.scrollTop）；
如果（document.body.scrollTop>200&&document.body.scrollTop<300）{
document.getElementsByClassName（'active'）[0].className.replace（'active'，''）；
document.getElementsByTagName（'li'）[next].className+='active'；
}
};

我对@VadimB的回答和我的评论/回答

$(window).on('scroll', function() {

  var windowSize = $(window).scrollTop(),
    documentSize = $(document).height() - $(window).height();

  $('li').removeClass('hello');

  if (windowSize < (documentSize) * 0.25) {
    $('li').removeClass('hello');
  } else if (windowSize < (documentSize) * 0.50) {
    $('li:nth-child(2)').addClass('hello');
  } else if (windowSize < (documentSize) * 0.75) {
    $('li:nth-child(3)').addClass('hello');
  } else if (windowSize > (documentSize) * 0.75) {
    $('li:nth-child(4)').addClass('hello');
  }

});

$（窗口）.on（'scroll'，function（）{
var windowSize=$（window.scrollTop（），
documentSize=$（文档）.height（）-$（窗口）.height（）；
$（'li'）.removeClass（'hello'）；
如果（窗口大小<（文档大小）*0.25）{
$（'li'）.removeClass（'hello'）；
}否则如果（窗口大小<（文档大小）*0.50）{
$（'li:nth child（2）'）.addClass（'hello'）；
}否则如果（窗口大小<（文档大小）*0.75）{
$（'li:nth child（3）'）.addClass（'hello'）；
}否则如果（窗口大小>（文档大小）*0.75）{
$（'li:nth child（4）'）.addClass（'hello'）；
}
});

---

Fiddle:

你忘了包括你自己尝试的JS你是指这样的东西吗（见演示）：@RoryMcCrossan不，我需要JS。实际上，我不知道如何编写：-）@Victor是的，但我需要它根据滚动量而不是滚动时可见的div来切换类名。所以不完全一样：）你能用百分比吗？如果你能，这可能对你有用：谢谢你的回答。不，这不是我想要的。我希望它能计算出页面的高度，并在滚动时显示LI。（我不是真正的js专家）：（为什么不呢？每次滚动文档时都会触发此事件。因此，您可以选择元素应显示或隐藏的范围。如果（pos>0&&pos<10）显示el1，则如果（pos>=10&&pos也许这只是我的编码技能。你能在我的JSFIDLE示例中使用它吗？我在这方面不是很熟练JS@VadimBFiddle在我看来很不错。唯一的问题是OP说如果你合并你的+我的Fiddle，页面高度不会总是2000px。这应该可以：