移动端Sticky Header滚动消失问题求助（附HTML/CSS代码）

你现在遇到的问题核心是：纯CSS的position: sticky只能实现固定在顶部的效果，没法做到根据滚动方向切换显示状态——这个交互需要结合JavaScript监听滚动行为，再配合CSS样式变化来实现。下面是完整的解决方案，只会在移动端生效，桌面端保持你原本的sticky正常表现：

第一步：修改CSS样式 #

先给.header添加过渡动画让切换更平滑，新增控制隐藏的类，再通过媒体查询限制仅在移动端生效：

.top_header { 
  padding-top: 15px; 
  border-bottom: 1px solid #f4eade; 
}
.header{ 
  overflow: hidden; 
  width: 100%; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  z-index: 110; 
  background-color: #fff; 
  padding-left: 5%; 
  padding-right: 5%; 
  position: sticky; 
  position: -webkit-sticky; 
  top: 0px; 
  box-shadow: 0px 2px 4.5px 0.5px rgba(0, 0, 0, 0.03);
  /* 添加过渡动画，让显示隐藏更自然 */
  transition: transform 0.3s ease-in-out;
}

/* 控制header隐藏的类 - 向上移出视野 */
.header--hidden {
  transform: translateY(-100%);
}

/* 媒体查询：屏幕宽度≥768px时（桌面端），禁用隐藏逻辑 */
@media (min-width: 768px) {
  .header--hidden {
    transform: translateY(0); /* 强制header保持显示 */
  }
}

第二步：添加JavaScript逻辑 #

通过监听滚动事件，记录滚动位置变化，判断滚动方向后切换样式类：

// 获取目标header元素
const header = document.querySelector('.header');
// 存储上一次的滚动位置
let lastScrollPosition = 0;

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取当前滚动距离顶部的数值（兼容不同浏览器）
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;

  // 向下滚动时：如果header未隐藏，添加隐藏类
  if (currentScroll > lastScrollPosition && !header.classList.contains('header--hidden')) {
    header.classList.add('header--hidden');
  } 
  // 向上滚动时：如果header已隐藏，移除隐藏类
  else if (currentScroll < lastScrollPosition && header.classList.contains('header--hidden')) {
    header.classList.remove('header--hidden');
  }

  // 更新上一次的滚动位置
  lastScrollPosition = currentScroll;
});

关键逻辑说明 #

• 滚动方向判断：通过对比当前滚动位置和上一次的位置，判断用户是向上还是向下滚动
• 平滑过渡：用transform: translateY(-100%)让header向上滑出视野，配合transition实现流畅的动画效果，比直接用display: none体验更好
• 设备区分：媒体查询确保桌面端不受影响，保持原有的sticky固定效果
• 兼容性：window.pageYOffset和document.documentElement.scrollTop的组合写法，覆盖了不同浏览器获取滚动位置的方式

把这些代码整合到你的项目中，就能实现需求：移动端向下滚动时header消失，向上滚动时重新显示，其他设备保持正常的sticky状态。

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