2

我编写了一些 javaScript，以便我的菜单从 position: static 开始，但将变为 position: fixed 并在用户向上滚动时停留在屏幕顶部，但在向下滚动时会再次消失。因为菜单上面有一些内容，一旦用户滚动到最顶部，菜单再次变为 position: static。

这段代码工作正常，但我在添加去抖动时遇到了问题。我读过我需要节流或去抖动以提高性能。我尝试过分别使用 Lodash _.debounce 和 _.throttle 函数。我不介意在向上滚动时显示自己的菜单有一些延迟，但是当用户滚动回到页面顶部时，标题在返回位置时会有延迟：静态。我曾尝试使用 {'leading': true} 选项来实现去抖动和节流功能，但效果并不好。

如果我将等待/延迟时间设置得太低，那么即使使用 debounce 或油门也毫无意义吗？我不想牺牲网站的性能，但已被要求实现此效果。

 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;
 }
4

0 回答 0