Javascript 滚动时间轴上的颜色更改

我有一个时间表，我想在用户滚动时更改它的颜色。以显示整个时间线的进度

我用一个伪类创建了时间轴：

.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: #F0F0F0;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

在此之后，我尝试使用一些js创建进度：

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

---

但是我做错了什么，我错过了什么

我想你必须把宽度削减到小数点后2位。我将其解析为完整的Int值。 我还向窗口添加了一个事件侦听器，我不知道您的侦听器是否工作（window.onscroll）。 谈论滚动事件，也许你想看看哪个更有效

函数myFunction（）{
var winScroll=document.body.scrollTop | | document.documentElement.scrollTop；
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight；
变量滚动=（winScroll/高度）*100；
console.log（滚动）；
document.getElementById（“myBar”）.style.width=parseInt（滚动）+“%”；
}
window.addEventListener（'scroll'，myFunction）
主体{高度：2000px；背景：黄色}
#我的酒吧{
位置：固定；
顶部：50px；
左：0px；
宽度：0%；
高度：40px；
背景：红色；
z指数：2；
}