如何用原生JS/CSS实现滚动向下隐藏Banner、向上显示且导航置顶

需求说明 #

向下滚动时隐藏.skinny-banner，向上滚动时重新显示；同时确保.main-nav始终固定在页面顶部，即使窄横幅隐藏时也保持顶部定位。

修改后的完整代码 #

CSS 部分

body {
  margin: 0;
}

.header-container {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100; /* 确保导航在内容上方 */
}

.skinny-banner {
  background-color: green;
  height: 40px;
  transition: transform 0.2s linear; /* 仅针对transform做过渡，动画更高效 */
  color: white;
  text-align: center;
  line-height: 40px; /* 让文字垂直居中 */
}

/* 隐藏窄横幅的类 */
.skinny-banner.hidden {
  transform: translateY(-100%); /* 向上移出视口，避免布局重排 */
}

.main-nav {
  min-height: 112px;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 112px; /* 文字垂直居中 */
}

.dummy-content {
  background-color: lightyellow;
  height: 1500px; /* 增加高度方便测试滚动行为 */
}

HTML 部分

<div class="header-container">
  <div class="skinny-banner">滚动向下时隐藏、向上时显示的窄横幅</div>
  <div class="main-nav">始终可见，窄横幅隐藏时固定在顶部</div>
</div>
<div class="dummy-content"></div>

JavaScript 部分

// 记录上一次滚动的位置
let lastScrollTop = 0;
const skinnyBanner = document.querySelector('.skinny-banner');

window.addEventListener('scroll', function() {
  // 获取当前滚动的垂直位置，兼容不同浏览器
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // 向下滚动且窄横幅未隐藏时，添加隐藏类
  if (scrollTop > lastScrollTop && !skinnyBanner.classList.contains('hidden')) {
    skinnyBanner.classList.add('hidden');
  } 
  // 向上滚动且窄横幅已隐藏时，移除隐藏类
  else if (scrollTop < lastScrollTop && skinnyBanner.classList.contains('hidden')) {
    skinnyBanner.classList.remove('hidden');
  }
  
  // 更新上一次滚动位置
  lastScrollTop = scrollTop;
});

代码说明 #

1. CSS 调整

   • 给.header-container加z-index:100，防止页面内容滚动时覆盖导航栏
   • 把过渡效果限定在transform属性上，相比修改height，不会触发页面布局重排，动画更流畅
   • 通过transform: translateY(-100%)实现窄横幅的隐藏，视觉过渡自然

2. JavaScript 逻辑

   • 用lastScrollTop记录上一次滚动位置，对比当前滚动值判断滚动方向
   • 根据滚动方向动态添加/移除hidden类，实现窄横幅的显示/隐藏切换
   • 兼容不同浏览器的滚动位置获取方式，确保逻辑稳定运行

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