如何在fullpage.js中实现滚动时将.header类元素的背景色改为透明？

既然你在用fullpage.js开发，那直接利用它自带的回调函数来实现这个需求是最稳妥的——毕竟fullpage的滚动是模拟的，原生的scroll事件可能不太靠谱。我给你两种常见的实现方案，你可以根据需求选择：

方案一：切换到第二个section时直接切换背景 #

如果你的需求是滚动到第二个section（aboutme）时，header直接变成透明，回到第一个section时恢复原背景，可以用fullpage的onLeave或afterLoad回调：

首先，先给.header加个过渡效果，让背景变化更平滑（可选但推荐）：

.header {
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 8px 15px;
  overflow: hidden;
  min-height: 46px;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 999;
  transition: background-color 0.3s ease; /* 添加过渡动画 */
}

然后初始化fullpage时配置回调：

new fullpage('#fullPage', {
  // 这里可以加你的其他fullpage配置，比如navigation、sectionsColor等
  afterLoad: function(origin, destination, direction) {
    const header = document.querySelector('.header');
    // 当进入第二个section（index从0开始）
    if (destination.index === 1) {
      header.style.backgroundColor = 'transparent';
    } else {
      // 回到第一个section时恢复原背景
      header.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
    }
  }
});

afterLoad会在进入某个section后触发，destination.index就是当前section的索引（第一个section是0，第二个是1）。如果你想在离开第一个section时就开始改变背景，可以换成onLeave回调，逻辑是一样的。

方案二：滚动过程中渐变透明度 #

如果你的需求是滚动过程中，header的背景从半透明逐渐过渡到透明，可以用fullpage的onScroll回调（需要fullpage.js v3及以上版本），或者开启滚动条监听原生scroll事件：

方法1：用fullpage的onScroll回调 #

new fullpage('#fullPage', {
  scrollBar: true, // 开启滚动条（可选，但有助于触发更准确的滚动事件）
  onScroll: function(scrollOffset) {
    const header = document.querySelector('.header');
    const windowHeight = window.innerHeight;
    // 计算透明度：滚动距离在0到windowHeight之间时，透明度从0.2降到0
    let opacity = 0.2 - (scrollOffset / windowHeight) * 0.2;
    opacity = Math.max(0, opacity); // 确保透明度不会变成负数
    header.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`;
  }
});

方法2：监听原生scroll事件（适合旧版本fullpage） #

如果你的fullpage版本不支持onScroll，可以开启滚动条后监听window的scroll事件：

new fullpage('#fullPage', {
  scrollBar: true // 必须开启，否则fullpage的滚动不会触发原生scroll事件
});

const header = document.querySelector('.header');
window.addEventListener('scroll', function() {
  const scrollOffset = window.scrollY;
  const windowHeight = window.innerHeight;
  let opacity = 0.2 - (scrollOffset / windowHeight) * 0.2;
  opacity = Math.max(0, opacity);
  header.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`;
});

两种方法的效果都是：从第一个section滚动到第二个的过程中，header的背景逐渐从rgba(0,0,0,0.2)变成完全透明。

额外优化建议 #

如果header的样式是用CSS类控制的，也可以通过添加/移除类来修改背景，比如定义一个.transparent-header类：

.transparent-header {
  background-color: transparent !important;
}

然后在回调中用header.classList.add('transparent-header')和header.classList.remove('transparent-header')，这样更符合CSS与JS分离的原则。

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