如何为导航栏实现滚动触发的透明/显示/粘性动画效果？

核心逻辑梳理 #

要实现目标效果，核心是跟踪滚动方向和滚动位置，而非仅依赖固定滚动阈值：

• 初始状态：导航栏透明，非粘性
• 向下滚动：导航栏通过动画平滑隐藏
• 向上滚动：立即显示带白色背景的导航栏，持续上滚时保持粘性，回到顶部后恢复透明

完整实现代码 #

CSS 样式 #

先定义导航栏基础样式及不同状态的过渡效果：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  background-color: transparent;
  transition: all 0.3s ease;
  z-index: 999;
}

/* 向上滚动时的白色背景状态 */
.header--visible {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transform: translateY(0);
}

/* 向下滚动时的隐藏状态 */
.header--hidden {
  transform: translateY(-100%);
}

/* 顶部透明初始状态 */
.header--transparent {
  background-color: transparent;
  box-shadow: none;
}

JavaScript 逻辑 #

通过记录上一次滚动位置判断滚动方向，控制导航栏类名切换：

const header = document.querySelector('.header');
let lastScrollTop = 0;

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;

  // 回到页面顶部时，恢复透明初始状态
  if (scrollTop <= 10) {
    header.classList.remove('header--visible', 'header--hidden');
    header.classList.add('header--transparent');
    lastScrollTop = scrollTop;
    return;
  }

  // 判断滚动方向
  if (scrollTop > lastScrollTop) {
    // 向下滚动：隐藏导航栏
    header.classList.remove('header--visible', 'header--transparent');
    header.classList.add('header--hidden');
  } else {
    // 向上滚动：显示白色粘性导航栏
    header.classList.remove('header--hidden', 'header--transparent');
    header.classList.add('header--visible');
  }

  lastScrollTop = scrollTop;
});

代码说明 #

1. CSS 部分：利用transition实现平滑动画过渡，通过不同类名控制导航栏的背景色、阴影和位移，确保状态切换时的微妙动画效果。
2. JS 部分：
   • 用lastScrollTop记录上一次滚动位置，与当前scrollTop对比判断滚动方向
   • 当滚动到顶部（scrollTop ≤10）时，强制切换回透明初始状态
   • 向下滚动时添加header--hidden类，通过transform: translateY(-100%)实现隐藏
   • 向上滚动时添加header--visible类，显示白色背景并保持粘性定位

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