Javascript 如何在向下滚动网站页面时更新进度条？

我遵循以下教程：，但当我向下滚动页面时，无法使javascript正常工作。当我在页面上下移动时，不会显示进度。我有灰色进度容器出现，但无法加载绿色部分

---

我想知道它是否必须在我现有的代码中做一些可能会把它搞砸的事情？任何建议都将不胜感激。

您最好使用

document.body

而不是

document.documentElement

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {    
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.body.scrollHeight - document.body.clientHeight;
  var scrolled = (winScroll / height) * 100;

  document.getElementById("myBar").style.width = scrolled + "%";
}

---

查看live in action-

请共享您现有的代码，以便我们查看它是否有bug。$（窗口）。滚动（函数（）{var scrollval=$（this.scrollTop（）；//它将返回滚动值$（“.button”）.css（“transform”，“translate（-50%，“+scrollval/3+%”）；$（“.buttonn2”）.css（“transform”，“translate（-50%，“+scrollval/2+%”）; }); 这是我的JS文件中的一段代码。此附加滚动方法是否与进度条的滚动方法冲突？谢谢是的，它们都将函数绑定到窗口滚动事件。