移动端Scroll Event失效：滚动时Navbar设为Sticky功能异常

• 检查视口元标签
  移动端页面必须配置正确的视口标签，否则window.scrollY的计算会出现偏差，导致逻辑判断错误。在HTML的<head>中添加：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 补充触摸事件监听
  部分移动端浏览器对scroll事件的响应不够及时，搭配touchmove事件监听可以覆盖触摸滚动的场景：

  function updateNavSticky() {
    const nav = document.querySelector("nav");
    nav.classList.toggle("sticky", window.scrollY > 0);
  }
  
  window.addEventListener("scroll", updateNavSticky);
  window.addEventListener("touchmove", updateNavSticky);
  

• 排查CSS层级与父元素限制
  确认导航栏的父元素没有设置overflow: hidden/scroll/auto属性，这类属性会干扰固定定位的触发。同时检查.sticky类的CSS是否正确：

  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* 根据需求添加背景、阴影等样式 */
  }
  

• 添加节流优化（可选）
  移动端滚动事件触发频率高，用节流函数减少逻辑执行次数，避免性能问题：

  function throttle(func, delay = 100) {
    let timer = null;
    return function() {
      if (!timer) {
        timer = setTimeout(() => {
          func.apply(this, arguments);
          timer = null;
        }, delay);
      }
    };
  }
  
  const throttledUpdate = throttle(updateNavSticky);
  window.addEventListener("scroll", throttledUpdate);
  window.addEventListener("touchmove", throttledUpdate);
  

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