Javascript 滚动链接定位不'；如果我滚动得太快，则无法工作。有更好的方法吗？

我正在尝试制作一个页眉，它在顶部、左侧和右侧都有一个边距，直到被滚动为止，此时它应该平滑地增长，直到不再有任何边距为止

我用“position:sticky”处理了页边空白顶部，并尝试使用滚动链接定位来逐步水平增长页眉

HTML

代码笔：

---

但是，当我滚动页面太快时，页眉不会完全增长。我如何才能做到这一点？

如果您不想使用JQuery：

let header=document.getElementById（“header”）；
让nav=document.getElementById（“nav”）；
window.addEventListener（“滚动”），函数（）
{
设marginTop=10；
if（window.scrollY>=（header.clientHeight+marginTop））
{
nav.style.position=“固定”；
nav.style.width=“100%”；
nav.style.margin=“0”；
}
其他的
{
nav.style.position=“”；
nav.style.width=“”；
nav.style.margin=“”；
}
});
*{框大小：边框框；}
html，正文{边距：0；填充：0；}
主体{高度：1200px；}
img{宽度：100%；}
#标题{背景：#a3b0b0；}
#导航{背景：#cad7d7；填充：8px；顶部：0；边距：10px 40px；}
ul{margin:0；padding:0；列表样式：none；}
ul li{显示：内联；}


家
关于
接触

所以我刚刚添加了

  else {
  header.style.marginLeft = "0";
  header.style.marginRight = "0";
  header.style.borderRadius = "0";
}

就在
if（滚动状态）之后，我在这个链接上发表了另一篇文章：试试那个。
  window.onscroll = function() { /* wait until page loaded */
     var margin = 15;
     var borderOffset = 1.875; /* 15/8 */
    var scrollStatus = window.pageYOffset;
    var header = document.getElementById("header");

    if (scrollStatus <= margin) {
      header.style.marginLeft = (margin - scrollStatus) + "px";
      header.style.marginRight = (margin - scrollStatus) + "px";
      header.style.borderRadius = ((margin - scrollStatus) / borderOffset) + "px";
    }
  };

header {
  background-color: blue;
  margin: 15px;
  position: sticky;
  top: 0;
  border-radius: 8px;
  padding: 8px;
}

  else {
  header.style.marginLeft = "0";
  header.style.marginRight = "0";
  header.style.borderRadius = "0";
}