主标题滑出时第二个标题不显示的问题修复求助

DevOps 小满

2026-7-20

问题根源

你的newHeader无法显示且没有滑动效果，核心原因如下：

newHeader默认CSS设置了display: none，JavaScript仅修改transform属性，但从未将其设置为可见状态
newHeader的CSS过渡属性未包含transform，导致JS修改时没有平滑动画
newHeader初始位置设置为top:73px，同时叠加transform: translateY(-100%)，位置逻辑冲突
两个Header的position属性重复定义（先sticky后覆盖为fixed），造成样式冗余

修复步骤

调整newHeader初始可见性：将默认display: none改为display: flex（与myHeader保持一致布局），通过transform控制隐藏/显示，而非display属性
统一过渡属性：为newHeader添加transform到过渡列表，确保滑动动画生效
修正初始位置逻辑：将newHeader初始top设为0，仅通过transform: translateY(-100%)实现隐藏，避免位置冲突
清理冗余样式：移除两个Header上重复的position: sticky定义，保持fixed属性统一
优化JS逻辑：滚动时同步控制两个Header的transform状态，无需额外修改display

修改后的完整代码

HTML（无需改动）

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&family=Poppins&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<div id="headerContainer">
  <header id="myHeader">
    <div class="main">
      <div class="content">
        <div class="logo">
          <h2>Amin</h2>
        </div>
        <nav>
          <div class="nav-item"> About <div class="submenu">
              <a href="#">Culture</a>
              <a href="#">Community</a>
              <a href="#">Milestones</a>
            </div>
          </div>
          <div class="nav-item"> Story <div class="submenu">
              <a href="#">Archives</a>
              <a href="#">History</a>
            </div>
          </div>
          <div class="nav-item">
            <a href="#">News</a>
          </div>
          <div class="nav-item"> Tech & Service <div class="submenu">
              <a href="#">Tech</a>
              <a href="#">Service</a>
            </div>
          </div>
          <div class="nav-item"> Responsibility <div class="submenu">
              <a href="#">Promise</a>
              <a href="#">ESG</a>
              <a href="#">Social Impact</a>
              <a href="#">Digital rights</a>
              <a href="#">AI Ethics</a>
            </div>
          </div>
        </nav>
        <div class="buttons">
          <button class="btn">
            <div class="icon"></div>
          </button>
          <button class="btn">
            <div class="icon"></div>
          </button>
          <button class="btn">
            <div class="icon"></div>
          </button>
          <!-- Repeat above line for other buttons -->
        </div>
      </div>
    </div>
  </header>
  <header id="newHeader">
    <div class="main">
      <div class="content">
        <div class="logo"> <h2>Amin's Workspace</h2> </div>
      </div>
    </div>
  </header>
</div>
<h1 style="margin-top: 3000px">test</h1>

CSS（修改关键部分）

* {
  box-sizing: border-box;
}

.sticky {
  position: fixed;
  top: 0;
  z-index: 100;
}

#headerContainer {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 移除重复的position: sticky定义 */
#myHeader,
#newHeader {
  transition: transform 0.3s ease-in-out;
}

#headerPlaceholder {
  height: 73px; /* 和Header高度保持一致 */
  visibility: hidden;
}

#myHeader.scrolled {
  border-bottom: solid 1px lightgrey;
}

#myHeader {
  position: fixed;
  top: 0px;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 73px;
  padding: 0 20px;
  border-bottom: solid 1px transparent;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  transition: transform 0.3s ease-in-out, border-color 0.3s;
}

#myHeader.slide-out {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  border-color: transparent;
}

#newHeader {
  position: fixed;
  top: 0; /* 修正初始top位置 */
  left: 0;
  display: flex; /* 改为flex，和myHeader一致 */
  justify-content: space-between;
  align-items: center;
  height: 73px;
  padding: 0 20px;
  border-bottom: solid 1px transparent;
  width: 100%;
  box-sizing: border-box;
  z-index: 99;
  opacity: 1; /* 移除默认透明 */
  transition: transform 0.3s ease-in-out, border-color 0.3s; /* 添加transform到过渡 */
  transform: translateY(-100%); /* 仅通过transform隐藏 */
}

#newHeader.slide-in {
  transform: translateY(0%); /* 改为transform控制显示 */
  border-color: lightgrey;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}

.main {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1300px; /* 按需调整 */
  width: 100%;
}

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.border-bottom {
  border-bottom: 1px solid grey;
}

.logo {
  font-family: 'Open Sans', sans-serif;
  user-select: none;
}

nav {
  display: flex;
}

.nav-item {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin-right: 10px;
  display: inline-block;
  padding: 0 28px;
  cursor: pointer;
}

.nav-item a {
  color: black;
  text-decoration: none;
}

.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  padding: 10px;
  border-radius: 24px;
  white-space: nowrap;
}

.submenu.active {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: max-content;
}

.submenu a {
  display: block;
  padding: 5px 10px;
  color: white;
  font-weight: normal;
  transition: color 0.1s;
}

.submenu a:hover {
  font-weight: bold;
}

.button {
  display: flex;
  justify-content: space-between;
  width: calc(36px * 3 + 18px * 2);
}

.btn {
  width: 36px;
  height: 36px;
  background-color: green;
  margin-right: 10px;
}

.icon {
  width: 24px;
  height: 24px;
  background-color: white;
}

JavaScript（无需改动，逻辑已匹配修复后的CSS）

window.addEventListener("DOMContentLoaded", function() {

  var mainHeader = document.getElementById("myHeader");

  // 添加滚动事件监听
window.addEventListener("scroll", function() {
  var oldHeader = document.getElementById('myHeader');
  var newHeader = document.getElementById('newHeader');
  
  if (window.pageYOffset > 0) {
    oldHeader.style.borderBottom = "1px solid lightgrey"; 
  } else {
    oldHeader.style.borderBottom = "none";
  }
  
  if (window.pageYOffset >= 100) {
    oldHeader.style.transform = "translateY(-100%)";
    newHeader.style.transform = "translateY(0%)";
  } else {
    oldHeader.style.transform = "translateY(0%)";
    newHeader.style.transform = "translateY(-100%)";
  }
});

  var navItems = document.querySelectorAll(".nav-item");

  navItems.forEach(function(navItem, index) {
    var submenu = navItem.querySelector(".submenu");
    var submenuItems = submenu ? submenu.querySelectorAll("a") : [];

    var link = navItem.querySelector("a");
    if (
      link &&
      index !== 2 &&
      submenuItems.length === 0
    ) {
      link.addEventListener("click", function(e) {
        e.stopPropagation();
        window.location.href = link.getAttribute("href");
      });
    }

    navItem.addEventListener("click", function(e) {
      var isActive = submenu && submenu.classList.contains("active");
      closeAllSubmenus();
      if (!isActive && index !== 2) {
        submenu && submenu.classList.add("active");
      }
      e.stopPropagation();
    });

    navItem.addEventListener("mouseover", function() {
      navItems.forEach(function(item) {
        if (item !== navItem) {
          item.querySelector("a").classList.add("hovered");
        }
      });
    });

    navItem.addEventListener("mouseout", function() {
      navItems.forEach(function(item) {
        if (item !== navItem) {
          item.querySelector("a").classList.remove("hovered");
        }
      });
    });

    submenuItems.forEach(function(item) {
      item.addEventListener("mouseover", function() {
        submenuItems.forEach(function(submenuItem) {
          if (submenuItem !== item) {
            submenuItem.classList.add("hovered");
          }
        });
      });

      item.addEventListener("mouseout", function() {
        submenuItems.forEach(function(submenuItem) {
          if (submenuItem !== item) {
            submenuItem.classList.remove("hovered");
          }
        });
      });
    });
  });

  function closeAllSubmenus() {
    var submenus = document.querySelectorAll(".submenu");
    submenus.forEach(function(submenu) {
      submenu.classList.remove("active");
    });
  }
});

效果验证

修改后，页面滚动超过100px时，myHeader平滑滑出顶部，newHeader同步滑入顶部位置；滚动回到顶部时，两个Header恢复初始状态，动画流畅无卡顿。

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

主标题滑出时第二个标题不显示的问题修复求助

问题根源 #

修复步骤 #

修改后的完整代码 #

HTML（无需改动）

CSS（修改关键部分）

JavaScript（无需改动，逻辑已匹配修复后的CSS）

效果验证 #

问题根源

修复步骤

修改后的完整代码

效果验证