页面滚动时为header添加第二个CSS类的实现求助

DevOps 小满

2026-5-15

别担心，这个需求其实只需要在你现有代码基础上多加一层判断就搞定了，完全不用复杂逻辑～

核心思路就是根据不同的滚动距离范围来控制两个类的添加和移除：

滚动距离很小（回到顶部附近）：移除所有收缩类，恢复原始样式
滚动超过第一个阈值（比如你原来的1）：只加shrink类
滚动超过第二个更大的阈值（比如200，你可以自己改这个数字）：同时保留shrink并添加shrink-new类

下面是修改后的完整代码，我给你加了详细注释：

<header> 
  <div class="container"> 
    <div class="logo"> 
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" alt="Logo"> 
    </div> 
    <nav> 
      <ul> 
        <li><a href="#">menu</a></li> 
        <li><a href="#">menu</a></li> 
        <li><a href="#">menu</a></li> 
        <li><a href="#">menu</a></li> 
      </ul> 
    </nav> 
  </div> 
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script>
// 监听窗口滚动事件
$(window).scroll(function(event) { 
  // 获取当前滚动的距离
  let scrollDistance = $(this).scrollTop();
  
  // 情况1：滚动距离小于等于1，回到顶部附近
  if (scrollDistance <= 1) { 
    $('header').removeClass('shrink shrink-new'); 
  } 
  // 情况2：滚动超过1但还没到第二个阈值（这里设的200，你可以自己改）
  else if (scrollDistance > 1 && scrollDistance < 200) { 
    $('header').addClass('shrink').removeClass('shrink-new'); 
  } 
  // 情况3：滚动超过第二个阈值，同时应用两个类
  else { 
    $('header').addClass('shrink shrink-new'); 
  }
}); 
</script>