如何避免两个功能不同的同样式Banner的CSS代码重复？

问题核心出在CSS共用时的状态区分和JS元素选择/逻辑控制上，以下是具体修复方案：

1. 重构CSS：分离通用样式与状态类 #

把两个Banner的通用样式抽成基础类，用独立状态类控制显示/隐藏，避免样式冲突：

/* 所有Banner共用的基础样式 */
.banner {
  width: 100%;
  height: 80px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* 状态类：控制显示 */
.banner--visible {
  display: flex !important;
}

/* 状态类：控制隐藏 */
.banner--hidden {
  display: none;
}

2. 调整HTML结构：明确初始状态 #

给两个Banner分别设置初始状态类，第一个默认显示，第二个默认隐藏：

<div class="banner banner--visible">第一个Banner</div>
<div class="banner banner--hidden">第二个Banner</div>

3. 修复JS逻辑：精准控制第二个Banner #

之前的异常大概率是JS只操作了第一个元素，或滚动百分比计算错误，修正后的JS：

// 精准选中第二个Banner（也可以给它加单独类如`banner--scroll-triggered`，更清晰）
const scrollBanner = document.querySelectorAll('.banner')[1];

window.addEventListener('scroll', () => {
  // 正确计算页面滚动百分比
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollPercent = (scrollTop / docHeight) * 100;

  // 根据滚动百分比切换状态
  if (scrollPercent >= 90) {
    scrollBanner.classList.add('banner--visible');
    scrollBanner.classList.remove('banner--hidden');
  } else {
    scrollBanner.classList.add('banner--hidden');
    scrollBanner.classList.remove('banner--visible');
  }
});

常见错误排查 #

• 禁用重复ID：如果之前给两个Banner加了相同ID，JS只会获取第一个元素，导致第二个无响应；
• 避免样式覆盖冲突：通用样式里不要写固定的display属性，用状态类动态切换；
• 滚动百分比计算要准确：必须用文档总高度 - 视口高度作为分母，否则百分比会超过100%，触发逻辑失效。

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