Javascript 去盎司/油门正在破坏我的固定头球效果

我编写了一些javaScript，这样我的菜单开始时是position:static，但会变成position:fixed，当用户向上滚动时，它会停留在屏幕顶部，但当用户向下滚动时，它会再次消失。因为菜单上面有一些内容，一旦用户滚动到最顶端，菜单就会再次变为position:static

这段代码工作正常，但我有一个问题时，添加去盎司。我已经读到我需要节流或去盎司的性能。我试过分别使用Lodash uBounce和Bounce两个函数。我不介意在向上滚动的菜单上显示一些延迟，但是当用户滚动回页面顶部时，标题在返回位置时会有延迟：静态。我已经尝试过使用{'leading'：true}选项来实现去盎司和节流功能，但效果不太好

如果我将等待/延迟时间设置得太低，那么即使使用去抖动或油门也没有意义了？我不想牺牲网站的性能，但是我被要求实现这个效果

 var header = document.getElementById("fixed-header");
 var offset = header.offsetTop;
 var $header = $(header);
 var headerHeight = parseInt($header.css("height"));
 var total = headerHeight + offset;

 var lastScrollTop = 0;
 window.addEventListener("scroll", _.debounce(scrollHeader, 200, {
     'leading': true
 }));

 function scrollHeader() {
     var st = window.pageYOffset || document.documentElement.scrollTop;
     if (st > lastScrollTop) {
         // downscroll code
         if (pageYOffset >= total) {
             document.body.classList.add("fixed");
             document.body.classList.add("is-hidden");
             document.body.style.paddingTop = header.offsetHeight + "px";
             header.style.transition = ".5s";
         } else {
             document.body.classList.remove("fixed");
             document.body.classList.remove("is-hidden");
             document.body.style.paddingTop = 0;
         }
     } else {
         // upscroll code
         if (pageYOffset >= offset) {

             document.body.classList.add("fixed");
             document.body.classList.remove("is-hidden");
             document.body.style.paddingTop = header.offsetHeight + "px";
         } else {
             header.style.transition = "initial";
             document.body.classList.remove("fixed");
             document.body.style.paddingTop = 0;
         }
     }
     lastScrollTop = st;
 }

---

lodash的

debounce

和

throttle

使用设置超时作为计时功能。也许您应该尝试使用，代价是丢失延迟参数，但有利于在下次重新绘制之前激发。