滚动时添加透明度/阴影类，回到顶部移除的实现方案求助

嘿，我来帮你搞定这两个滚动交互需求！咱们结合滚动监听和类名切换来实现，逻辑清晰还容易维护～

核心思路 #

我们需要监听页面的scroll事件，通过判断当前滚动位置和滚动方向，来动态给元素添加/移除对应的CSS类：

• 当页面回到顶部（scrollY === 0）时，重置所有状态；
• 滚动过程中，根据滚动方向控制粘性头部的显示/隐藏，同时给目标元素添加透明度类、给头部添加阴影类。

第一步：准备CSS样式 #

先定义好需要用到的类，这样JS只需要负责切换类名就行，样式逻辑全放在CSS里：

/* 目标元素的透明度类 - 可自定义透明度和过渡效果 */
.opacity-active {
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}

/* 粘性头部基础样式 */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  transition: all 0.3s ease-in-out; /* 平滑过渡所有属性 */
}

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

/* 头部滚动时的阴影类 */
.header-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

第二步：编写JavaScript逻辑 #

我们需要监听滚动事件，记录滚动位置来判断方向，同时处理元素的类名切换：

// 获取需要操作的DOM元素
const targetElement = document.querySelector('.target-element');
const stickyHeader = document.querySelector('.sticky-header');

// 记录上一次的滚动位置，初始为0
let lastScrollY = 0;

// 滚动事件处理函数
function handleScroll() {
  const currentScrollY = window.scrollY;

  // 情况1：回到页面顶部，重置所有状态
  if (currentScrollY === 0) {
    targetElement.classList.remove('opacity-active');
    stickyHeader.classList.remove('header-shadow', 'header-hidden');
    lastScrollY = 0;
    return;
  }

  // 情况2：滚动中，给目标元素添加透明度类
  targetElement.classList.add('opacity-active');

  // 处理粘性头部：滚动时添加阴影类
  stickyHeader.classList.add('header-shadow');

  // 判断滚动方向，控制头部显示/隐藏
  if (currentScrollY > lastScrollY) {
    // 向下滚动：隐藏头部
    stickyHeader.classList.add('header-hidden');
  } else {
    // 向上滚动：显示头部
    stickyHeader.classList.remove('header-hidden');
  }

  // 更新上一次滚动位置
  lastScrollY = currentScrollY;
}

// 优化：添加防抖函数，减少scroll事件触发频率，提升性能
function debounce(func, delay = 15) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 添加滚动监听（用防抖包装处理函数）
window.addEventListener('scroll', debounce(handleScroll));

// 页面加载时执行一次，处理初始不在顶部的情况
handleScroll();

关键细节说明 #

1. 回到顶部的判断：通过window.scrollY === 0精准判断是否回到页面最顶端，此时移除所有动态添加的类；
2. 滚动方向判断：对比currentScrollY和lastScrollY的值，大于就是向下滚，小于就是向上滚，以此控制头部的显示隐藏；
3. 性能优化：用防抖函数包装滚动处理函数，避免scroll事件频繁触发导致的性能问题；
4. 初始状态处理：页面加载时执行一次handleScroll，如果页面刷新时不在顶部，能直接应用对应的类。

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