Question

我已经编写了一些javaScript，以便我的菜单以position：static开始，但是将变为position：fixed并且只要用户向上滚动就会停留在屏幕顶部，但只要向下滚动就会再次消失。因为菜单上面有一些内容，所以一旦用户滚动到最顶层，菜单就会再次变为position：static。

此代码可以正常工作但添加去抖时我遇到了问题。我读过我需要节流或去抖性能。我已经尝试分别使用Lodash _.debounce和_.throttle函数。我不介意在菜单上显示自己向上滚动时有一些延迟，但是当用户滚动回到页面顶部时，当返回到位置时，标题会有延迟。我已尝试使用{'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;
 }

debounce / throttle正在破坏我的固定标题效果

0 个答案: