Sticky导航栏激活且打开子菜单时图片Logo闪烁故障求助

我做了一个带下拉子菜单的导航栏，用图片当Logo，通过JavaScript实现了粘性（Sticky）效果。现在遇到的问题是：当粘性效果激活且打开子菜单时，图片Logo会随机出现闪烁故障；但如果Logo换成纯文本就没问题。试了多种Div嵌套组合都没解决，附上部分代码求排查原因。

代码片段 #

JavaScript

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var scrollHeight = document.body.scrollHeight;

function scrollDetect() {
  var lastScroll = 0;
  window.onscroll = function() {
    let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

    if (currentScroll > 0 && lastScroll <= currentScroll) {
      lastScroll = currentScroll;
      navbar.classList.remove("sticky");
      navbar.classList.remove("z-index-999999");
    } else {
      lastScroll = currentScroll;
      navbar.classList.add("sticky");
      navbar.classList.add("z-index-999999");
    }

    if (currentScroll < 100) {
      navbar.classList.remove("sticky");
      navbar.classList.remove("z-index-999999");
    }

  };
}

scrollDetect();

CSS

.main-navbar {
  position: absolute;
  display: inline-flex;
  background-color: red;
  top: 3.7rem;
  width: 100%;
  height: 4.5rem;
}

/*Code for Sticky*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.3s height ease-in-out;
  -webkit-transition: 0.3s height ease-in-out;
  -moz-transition: 0.3s height ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  animation: faceInEffect 0.3s;
  -webkit-animation: faceInEffect 0.3s;
}

.logo img {
  position: relative;
  margin-right: 11.1rem;
  left: 9%;
  margin-top: -3px;
  width: 330px;
}

.nav-list {
  font-size: 1rem;
  display: flex;
  width: 30%;
  margin-top: .7rem;
  margin-left: 2.7rem;
}

.nav-list li {
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 1.3rem 1rem;
}

.sub-menu {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  background-color: white;
  visibility: hidden;
  top: 3.8rem;
  left: -34.4rem;
  width: 89.89rem;
  height: 35rem;
  z-index: 100;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.sub-menu a {
  position: relative;
  top: 2rem;
  color: black;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 3rem 40px 0 40px;
}

.nav-list>li:hover .sub-menu {
    visibility: visible;
}

.z-index-999999{
z-index: 999999999;
}

.content {
 position: absolute;
 top: 100rem;
}

HTML

<div class="main-navbar" id="navbar">
  <div class="logo">
    <a><img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt=""></a>
  </div>
  <nav>
    <ul class="nav-list">
      <li class="dropdown-item-1">
        <a href="">Men</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
          <ul>
      </li>
      <ul>
  </nav>
</div>
<div class=content>
  content for scroll
</div>

故障排查与修复方案 #

1. 滚动事件高频触发导致重绘抖动
   滚动时window.onscroll会被高频调用，导致导航栏类名反复切换，引发重绘闪烁。添加防抖函数限制触发频率：

   function debounce(func, wait) {
     let timeout;
     return function(...args) {
       const later = () => {
         clearTimeout(timeout);
         func(...args);
       };
       clearTimeout(timeout);
       timeout = setTimeout(later, wait);
     };
   }
   
   // 修改scrollDetect中的滚动事件绑定
   window.onscroll = debounce(function() {
     let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
     if (currentScroll > 0 && lastScroll <= currentScroll) {
       lastScroll = currentScroll;
       navbar.classList.remove("sticky", "z-index-999999");
     } else {
       lastScroll = currentScroll;
       navbar.classList.add("sticky", "z-index-999999");
     }
     if (currentScroll < 100) {
       navbar.classList.remove("sticky", "z-index-999999");
     }
   }, 15);
   

2. Logo图片重绘优化
   给Logo图片添加硬件加速属性，避免子菜单显示时的重绘冲突：

   .logo img {
     /* 原有样式保留 */
     will-change: transform;
     transform: translateZ(0);
     backface-visibility: hidden;
   }
   

3. 粘性动画与布局冲突
   .sticky类中同时存在transition和animation，可能和子菜单布局变化冲突，简化过渡属性：

   .sticky {
     position: fixed;
     top: 0;
     width: 100%;
     /* 只保留必要的过渡属性，移除可能冲突的动画 */
     transition: top 0.3s ease-in-out;
     /* animation: faceInEffect 0.3s; */
   }
   

4. 修复HTML结构异常
   原HTML中存在未闭合的<ul>标签，导致浏览器渲染布局异常，修正后：

   <div class="main-navbar" id="navbar">
     <div class="logo">
       <a><img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt="Logo"></a>
     </div>
     <nav>
       <ul class="nav-list">
         <li class="dropdown-item-1">
           <a href="#">Men</a>
           <ul class="sub-menu">
             <li><a href="#">shirts</a></li>
           </ul>
         </li>
       </ul>
     </nav>
   </div>
   <div class="content">
     content for scroll
   </div>
   

内容的提问来源于stack exchange，提问作者Thor The dog