Javascript 在上下滚动时将类添加到div

正如你所看到的，我有许多垂直排列的点！在向下滚动时，它工作，当一个滚动下一个点得到一个改变球样式的类时，我希望在向上滚动时发生完全相同的情况，但它不工作！请任何输入是感激的

这里是一个供您参考的网站

在html、css和javascript下面：

var-activeMilestone=function（）{
var milestoneBalls=$（'.dot'）；
milestoneBalls[0]。类列表。添加（“活动”）；
window.onscroll=函数（）{
milestoneBalls.每个（功能（i、v）{
var thispall=$（此）；
var nextBall=milestoneBalls[i+1]；
var prevBall=milestoneBalls[i-1]；
var thisPositionTop=thispall.offset（）.top+（$（this.parent（）.height（）/3）；
var winScroll=window.scrollY；
如果（thisPositionTop=winScroll）{
//这个.classList.add（“非活动球”）；
}
});
}
}
$（文档）.ready（活动里程碑）
.wrapper{
高度：1000px；
背景色：小麦；
}
.info\u包装器{
利润上限：70像素；
}
.集装箱{
身高：50%；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐项目：居中；
}
多特先生{
宽度：30px；
高度：30px；
边界半径：20px；
背景颜色：栗色；
边框：实心4px绿色；
}
.主动{
边框：实心4px黄色；
背景色：红色；
}
.不活跃{
背景颜色：栗色；
边框：实心4px绿色；
}
.text{}
.标题{
宽度：100%；
高度：50px；
背景颜色：浅蓝色；
}
您可以使用jQuery中的on wheel

$(window).on('wheel',function(e) {
  var mov = e.originalEvent.deltaY;
  if(mov > 0) {
    alert("up");
  }else {
    alert("down");
  }
});

这将解决有关滚动方向检测的问题。
因此，此逻辑执行的操作与您之前执行的操作相同。通过添加的逻辑，如果元素不应前进，并且我们不是第一个元素，则检查前一个球是否应处于活动状态。如果是这样的话，我们就把它激活


var-activeMilestone=function（）{
var milestoneBalls=$（'.dot'）；
milestoneBalls.eq（0）.addClass（'active'）；
addEventListener（'scroll'，function（）{
var activeBall=milestoneBalls.filter（'.active'）；
var activeBallIndex=milestoneBalls.index（activeBall）；
var activeBallPositionTop=activeBall.offset（）.top+（activeBall.parent（）.height（）/3）；
如果（ActiveBallPositionTopWindow.scrollY）{
activeBall.removeClass（'active'）；
previousBall.addClass（'active'）；
}
}
});
}
$（文档）.ready（活动里程碑）
.wrapper{
高度：1000px；
背景色：小麦；
}
.info\u包装器{
利润上限：70像素；
}
.集装箱{
身高：50%；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐项目：居中；
}
多特先生{
宽度：30px；
高度：30px；
边界半径：20px；
背景颜色：栗色；
边框：实心4px绿色；
}
.主动{
边框：实心4px黄色；
背景色：红色；
}
.不活跃{
背景颜色：栗色；
边框：实心4px绿色；
}
.text{}
.标题{
宽度：100%；
高度：50px；
背景颜色：浅蓝色；
}

简短的回答是因为你无法处理它。（应该是球）。但是，通常这就像分区一样解决，当当前点到达该分区时，它将每隔一段时间处于活动状态。哦，也因为你使用的是active和inactive，当你向上滚动时，两者都是。对于inactive，您不需要特殊的类，将所有内容格式化为inactive，只需将此时应处于活动状态的内容设置为active，并用该类覆盖必要的样式。但方向是相反的。上升是负数。