Javascript onScroll通过在屏幕上可见将类添加到div

我正在为网站制作一个时间表，在滚动条上我需要

addClass

到窗口中可见的部分。我的jQuery适用于屏幕上甚至不可见的所有div或section

您可以在我的

这是我的jQuery

$(window).on('load scroll', function() {
    var $elem = $('#timeline .section');
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + 20 + $window.height();
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();
    if (elemTop < docViewBottom) {
    $("#timeline .section").each(function(i) {
      $(this).delay(300 * i).addClass("active");
    });

    }
});

$（窗口）.on（'load scroll'，function（））{
var$elem=$（“#timeline.section”）；
变量$window=$（window）；
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+20+$window.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
if（elemTop

$（窗口）.on（'load scroll'，function（））{
var$e=$（“#timeline.section”）；
$e.removeClass（“活动”）
$e.每个（功能（索引）{
变量$window=$（window）；
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+20+$window.height（）；
var elemTop=$e.eq（index）.offset（）.top；
var elemBottom=elemTop+$e.eq（index.height（）；
if（elemTop>docViewTop&&elemBottom
#时间线{
最大宽度：620px；
利润率：40px自动20px；
}
#时间线.部分{
位置：相对位置；
}
#时间线。章节。年份{
文本对齐：居中；
填充：30px 0 10px 0；
字号：18px；
字体大小：300；
转换：1s易入易出；
}
#时间线。章节。年份：之后{
内容：“；
不透明度：0；
宽度：9px；
高度：9px；
背景#006699；
边界半径：100%；
位置：绝对位置；
保证金：自动；
底部：0；
左：0；
右：0；
转换：1s易入易出；
}
#时间轴。节。文本秒{
位置：绝对位置；
字号：100；
线高：24px；
右：0；
底部：40px；
转换：1s易入易出；
}
#时间轴。部分。左秒{
最大宽度：275px；
文本对齐：右对齐；
浮动：左；
位置：绝对位置；
左：0；
顶部：100px；
填充：0；
}
#时间线.剖面线{
背景：#dedede；
宽度：1px；
高度：200px；
位置：相对位置；
保证金：0自动；
转换：1s易入易出；
}
#时间轴。部分。秒右{
最大宽度：265像素；
浮动：对；
}
#时间轴.节.活动.年{
颜色：#333333；
}
#时间轴。节。活动。年份：之后{
不透明度：1；
}
#timeline.section.active.text秒{
颜色：#333333；
}
#timeline.section.active.sec左{}
#timeline.section.active.line{
背景#006699；
}
#timeline.section.active.sec right{}

2014
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。佩伦特斯·索利西图丁、纳拉·奎斯·福吉亚、奥古斯特·奥古斯特·托托·斯克利斯·乌尔纳、阿梅特·尤里西斯·莱克托
2015
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。佩伦茨克·索利西图丁，努拉·奎斯
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。佩伦茨克·索利西图丁、纳拉·奎斯·奎斯·福吉亚、奥古斯·托托
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。佩伦茨克·索利西图丁，努拉·奎斯。
2016
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。佩伦茨克·索利西图丁、纳拉·奎斯·福吉亚、奥古斯
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。佩伦茨克
Lorem ipsum dolor sit amet，是一位杰出的献身者。一个入口。前庭通畅，位于前庭。不，不，不，不，不。佩伦茨克·索利西图丁（Pellentesque sollicitudin），没有效率的封建主义者
Lorem ipsum dolor sit amet，奉献精英。。
现在
尝试此链接