为什么页面动态滚动时可折叠header无法正常收缩？

存在的问题 #

• HTML结构异常：<section id="header-top"> 内部存在多个多余的闭合</div>标签，标签嵌套混乱，可能导致DOM选择器命中异常
• CSS适配问题：
  • 代码使用了SCSS嵌套语法，若未编译为原生CSS，浏览器无法识别.collapsed的样式规则
  • 重复声明position属性，且未设置top: 0，固定定位的header可能出现偏移
  • .collapsed的最小高度设置为50px，与你预期的75px不符
  • 未给页面主体设置对应顶部内边距，fixed定位的header会遮挡页面内容，导致滚动触发阈值判断异常
• JS逻辑BUG：
  • 代码中手动修改scrollTop的逻辑会导致页面跳动，甚至在部分场景下触发滚动事件死循环
  • 仅判断document.documentElement.scrollTop，未兼容document.body.scrollTop，部分浏览器（如Safari）无法正确获取滚动距离
  • 直接修改className属性会覆盖元素原有其他类名，操作风险较高

修复后的HTML（清理冗余闭合标签） #

<header id="masthead" class="site-header">
    <section class="header-top" id="header-top">
        <div class="container content">
            <div class="top-search">
                <?php get_search_form( ); ?>
            </div>
            <div class="site-branding">
                <a  href="<?php echo site_url( );?>"><img class="logo" src="<?php echo get_template_directory_uri(  ) . '/logo.svg'?>"></a>                 
            </div>  
            <div class="header-right">
                <p class="contribute"><a href="#">Contribute</a></p>   
            </div>  
        </div>
        <div class="container">
            <div class="top-search">
            </div>
            <div class="site-branding">             
            </div>  
            <div class="header-right">                  
            </div>              
        </div>
        <div class="container header-top-block" id="titles" style="display:block">              
            <h3 class="header-block-heading-line" id="soup">
                <a href="<?php echo home_url(); ?>" target="">
                Hello
                </a>
            </h3>
        </div>
    </section> <!-- end header main -->
    <section class="header-nav">
        <div class="container borders">
        </div>  
    </section>
</header><!-- #masthead -->

修复后的CSS（原生可直接运行版本） #

.header-top {
  width: 100%;
  z-index: 999;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 125px;
  transition: min-height 0.3s ease; /* 可选，添加平滑收缩过渡效果 */
}
.header-top.collapsed {
  min-height: 75px; /* 匹配你预期的收缩后高度 */
}
.header-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
/* 避免页面内容被固定定位的header遮挡 */
body {
  padding-top: 125px;
  transition: padding-top 0.3s ease;
}

修复后的JS代码 #

window.onscroll = function() {myFunction()};

function myFunction() {
  // 兼容不同浏览器的滚动距离获取逻辑
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const header = document.getElementById("header-top");
  if (scrollTop > 100) {
    if(!header.classList.contains('collapsed')){
      header.classList.add('collapsed');
      document.body.style.paddingTop = '75px';
    }
  } else {
    if(header.classList.contains('collapsed')){
      header.classList.remove('collapsed');
      document.body.style.paddingTop = '125px';
    }
  }
}

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