Javascript 在页面上的特定点启动滚动指示器

我正在使用下面的HTML、CSS和JavaScript使这个滚动指示器工作。我唯一的问题是，我想滚动进度开始时，用户约10%的方式向下的页面

你知道怎么做吗

---

我认为这可以通过使用if语句来实现

if (percentage >=10){
    scrollIndicatorElt.style.width = percentage + '%';
} else {
    scrollIndicatorElt.style.width = 0 + '%';
}

仅当百分比滚动比页面高度高10%时，此选项才会扩展指示器。一开始可能很难看到，但如果你调整窗口，使其只有一小部分空间可以滚动，你应该能够看到它，直到它通过10

constScrollIndicatorRelt=document.getElementById（'scrollIndicator'）；
constScrollIndicatorRelttwo=document.getElementById（'scrollIndicator2'）；
var footerHeight=document.getElementsByClassName（'footer'）[0]。clientHeight
const maxScrollableHeight=（document.body.scrollHeight-footerHeight）-window.innerHeight；
//使用以下选项查看包含和不包含页脚高度之间的差异
//const maxScrollableHeight=document.body.scrollHeight-window.innerHeight
window.addEventListener（'scroll'，moveScrollIndicator）；
函数moveScrollIndicator（）{
常量百分比=（（window.scrollY）/maxScrollableHeight）*100；
如果（百分比>=10）{
ScrollIndicatorRelt.style.width=（百分比-10）+'%'；
ScrollIndicatorReltTwo.style.width=百分比+'%'；
}否则{
ScrollIndicatorRelt.style.width=0+'%'；
ScrollIndicatorRelttwo.style.width=0+'%'；
}
}

#滚动指示器{
高度：20px；
边框：实心1px黑色；
位置：固定；
}
#滚动指示器2{
高度：20px；
边框：实心1px黑色；
位置：固定；
顶部：35px；
}
.页脚{
位置：绝对位置；
底部：0px；
宽度：100%；
边框：实心1px黑色；
高度：100px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

这是你的页脚

您是否可以将其设置为

（百分比+10）+'%'

？如果用户向上滚动，则会留下一块指示器可见。这效果更好，但问题是，当您达到10标记时，指示器会进行大的跳跃。它不会从屏幕最左边缘缓慢开始。想法？我刚刚更新了答案。我添加了一个

过渡：宽度0.3s至
滚动指示器
。这将阻止跳转并显示较慢的进度。你可以根据自己的喜好调整速度，但我不建议速度太慢，否则会出现延迟或滞后。我认为0.3s是一个很好的媒介。效果更好，但我真正想要实现的是让它开始，并且只将文章区域计算为进度。因此，虽然酒吧跳出来的速度较慢，但它的进度实际上反映了大约1/6的阅读量，而事实上这只是一个开始。有办法解决吗？啊，现在我明白你的意思了。我删除了转换持续时间并更新了代码段。如果它大于10，那么我只是从百分比中减去10。所以10%现在是从1%开始的。我还添加了另一个滚动条来显示差异。前一个从百分比中减去10，另一个则没有。第一个是你要找的更准确的指示器。马特，非常聪明，效果很好！如果我能再问一个问题。假设页面底部的10%实际上是页脚。是否有办法使代码段在页脚之前的完全前进位置结束滚动指示器？
.line {
      background: #00ba74 ;
      height: 7px;
      border-radius: 0px;
      width: 0%;
      position: fixed;
      top: 0;
    z-index: 1;
    }

if (percentage >=10){
    scrollIndicatorElt.style.width = percentage + '%';
} else {
    scrollIndicatorElt.style.width = 0 + '%';
}