如何将javascript ScrollSpy添加到此平滑滚动函数（无库（纯JS））

请查看演示1中的此代码：

有一个具有平滑滚动效果的简单页面“非库（纯JS）”，但有一个问题，我真的不知道如何添加SCROLLSPY，以根据部分内容更改菜单的文本颜色：(

对于上面的演示1，是否有简单的解决方案来实现scrollspy

我真的需要你们的帮助，因为DEMO1中使用的javascript函数对我来说太难了：（有人能告诉我怎么做吗？我不能使用jQuery、Bootstrap、React等等。）

我有另一个示例演示2：► , 在scrollspy工作正常的地方，但是我需要让它在我的原始演示中工作1

function menuControl(e) {
  for (var t = window.scrollY || document.documentElement.scrollTop, n = e.querySelectorAll('a[href^="#"]'), o = 0; o < n.length; o++) {
    var r = n[o],
      i = document.querySelector(r.getAttribute("href"));
    i.offsetTop <= t && i.offsetTop + i.clientHeight > t ? r.classList.add("active") : r.classList.remove("active")
  }
}

function scrollSpy(e, t, n) {
  animated(e, t, n), document.addEventListener("scroll", function() {
    menuControl(e)
  })
}
window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(e) {
  window.setTimeout(e, 1e3 / 60)
};

功能菜单控件（e）{
对于（var t=window.scrollY | | | document.documentElement.scrollTop，n=e.querySelectorAll（'a[href^=“#”]”），o=0；o

我会感谢你的帮助，提前谢谢你♥

function menuControl(e) {
  for (var t = window.scrollY || document.documentElement.scrollTop, n = e.querySelectorAll('a[href^="#"]'), o = 0; o < n.length; o++) {
    var r = n[o],
      i = document.querySelector(r.getAttribute("href"));
    i.offsetTop <= t && i.offsetTop + i.clientHeight > t ? r.classList.add("active") : r.classList.remove("active")
  }
}

function scrollSpy(e, t, n) {
  animated(e, t, n), document.addEventListener("scroll", function() {
    menuControl(e)
  })
}
window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(e) {
  window.setTimeout(e, 1e3 / 60)
};