如何优化基于scroll位置的固定导航栏显隐代码以实现平滑效果？

原代码的问题所在 #

• 滚动事件触发频率极高（每秒可达数十次），每次都重新查询<nav>元素，造成不必要的性能开销
• 直接修改style.top没有过渡效果，显隐动作生硬，且未利用GPU加速的渲染优化特性

优化后的完整实现 #

第一步：优化滚动事件性能

提前缓存DOM元素，并用节流函数限制事件触发频率，减少无效计算：

// 提前获取导航栏元素，避免每次滚动都重复查询DOM
const nav = document.querySelector('nav');
let lastScrollPos = window.scrollY;
let isTicking = false;

// 节流函数：借助requestAnimationFrame控制触发频率，降低性能消耗
function throttleScroll(callback) {
  if (!isTicking) {
    window.requestAnimationFrame(() => {
      callback();
      isTicking = false;
    });
    isTicking = true;
  }
}

// 核心滚动逻辑处理
function handleScroll() {
  const currentScrollPos = window.scrollY;
  
  // 按照需求：向下滚动超过100px时显示导航栏，向上滚动时隐藏
  if (currentScrollPos > 100 && currentScrollPos > lastScrollPos) {
    nav.classList.add('show-nav');
    nav.classList.remove('hide-nav');
  } else {
    nav.classList.add('hide-nav');
    nav.classList.remove('show-nav');
  }
  
  lastScrollPos = currentScrollPos;
}

// 绑定节流后的滚动事件
window.addEventListener('scroll', () => throttleScroll(handleScroll));

第二步：用CSS实现平滑GPU加速动画

使用transform（GPU加速属性）配合transition实现流畅的显隐效果，性能远优于直接修改top属性：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 初始状态：完全移出视口 */
  transform: translateY(-100%);
  /* 添加过渡动画，控制显隐的平滑速度 */
  transition: transform 0.3s ease;
  /* 提前告知浏览器元素即将变换，让浏览器提前做好渲染优化 */
  will-change: transform;
}

.show-nav {
  transform: translateY(0);
}

.hide-nav {
  transform: translateY(-100%);
}

额外优化小技巧 #

• 如果导航栏高度固定，可以把translateY(-100%)替换为具体高度值（比如translateY(-70px)），减少浏览器的计算量
• 用类名切换样式比直接操作style属性更清晰，也方便后续扩展更多样式逻辑

内容的提问来源于stack exchange，提问作者Jinil