请参阅Codepen以更好地理解我试图解释的内容。您可以在滚动时跟随控制台查看代码中变量的值。
在section 2中，我有三个面板(面板1，面板2和面板3)，我希望在滚动时通过三个单独的进度条来跟踪它们。所以，当我滚动到第2部分时，当面板1在视图中时，面板1的进度条应该填充，面板2和面板3也是如此。
对于面板1，第2部分从0%开始，以22%结束，(我认为)是:sectionProgress / 22-sectionProgress是我在第二节中滚动的量。然而面板2从第2部分的22%开始，以75%结束，而面板3从75%开始，以100%结束<-和这是我不知道使用什么公式的地方.
更简单地说:
面板1- section 2的0% ===面板1进度条上的0%
- . .
- section 2的22% ==面板1进度条的100%
当面板2
- section 2的22% ===面板2进度条上的0%
- . .
- section 2的75% ==> panel 2进度条上的100%
当面板3
- section 2的75% ===面板3进度条上的0%
- . .
- 第2部分的100% ===面板3进度条上的100%
对于面板2，您必须计算滚动位置的22%到75%之间的百分比。你从0%计算到75%。(同样的逻辑必须应用于面板3)
if(sectionProgress < 22) {
percentagePanelTwo = 0
}
else if(sectionProgress <= 75) {
percentagePanelTwo = (sectionProgress - 22) / (75-22)
} else {
percentagePanelTwo = 1;
}
另一个代码改进是删除每个面板计算周围的if
// remove => if (scrolledFromTop >= sidePanelOffsetPanelOne) {
因为如果用户再次向上滚动，这将防止进度条缩小。
注意，在上面的第一个代码示例中，我处理了所有三种情况:- percentagePanelTwo为0，如果scroll在panel 之前
- percentagePanelTwo的变量值，如果滚动在面板2
- 和percentagePanelTwo = 1如果滚动是在面板后
如果你愿意接受更"纯粹的";解决方案，没有这20个与gsap相关的依赖关系，这里是您当前构建的重建，利用CSS滚动捕捉与JS事件监听器配合，在每个部分的不同背景颜色之间褪色，并相应地填充空白进度条。
这里还有一个注意事项，为了流畅的用户体验，由于第一个面板开始于滚动阈值之上，用户通常必须滚动过去才能开始填充相关的进度条，所以我有条件地在进度条容器上设置smooth类，并在进度条接近边缘时启用CSS过渡，在左侧或右侧。
当不在边缘附近时，不需要过渡，因此则移除类。在不需要的时候进行过渡实际上会导致另一个不良的副作用，其中一个bar可能在另一个完全完成填充/清空之前开始填充。
这是我的解决方案，0依赖:https://codepen.io/brandonmcconnell/pen/f58fd03211eaf02467b1e92c116042b6?editors=0010