React fullPage.js如何获取section状态实现header动态CSS效果

核心逻辑依赖React版fullPage.js官方提供的生命周期回调获取当前激活section的索引，不需要额外手写滚动监听，避免和组件内置滚动逻辑冲突。

实现步骤 #

• 首先在组件中声明状态控制header显隐，初始值设为true，匹配页面初始加载、首个section展示时header正常显示的需求，避免首屏闪烁。
• 给ReactFullpage组件绑定afterLoad回调，该回调会在每次section滚动到位后触发，回调返回的destination参数携带当前激活区块的信息，其中index属性为区块索引（从0开始计数，第一个区块对应索引0）。
• 在回调中判断索引值：当前索引为0时将header显隐状态设为true，其余情况设为false。
• 将显隐状态绑定到header组件的样式或class上，实现动态效果。

可直接复用的代码示例 #

import React, { useState } from 'react';
import ReactFullpage from '@fullpage/react-fullpage';
import './index.css';

const FullPageSite = () => {
  const [showHeader, setShowHeader] = useState(true);

  return (
    <div className="app">
      {/* 头部区域 */}
      <header 
        className="global-header"
        style={{ display: showHeader ? 'block' : 'none' }}
      >
        <div className="logo">站点Logo</div>
        <nav>导航菜单</nav>
      </header>

      <ReactFullpage
        scrollingSpeed={600}
        // 其他fullpage配置项根据自身需求填写
        afterLoad={(origin, destination) => {
          // 索引为0即第一个区块，显示header，其余隐藏
          setShowHeader(destination.index === 0);
        }}
        render={() => (
          <ReactFullpage.Wrapper>
            <div className="section">首屏区块（Header显示）</div>
            <div className="section">第二屏区块（Header隐藏）</div>
            <div className="section">第三屏区块（Header隐藏）</div>
            <div className="section">第四屏区块（Header隐藏）</div>
          </ReactFullpage.Wrapper>
        )}
      />
    </div>
  );
};

export default FullPageSite;

优化注意点 #

• 禁止自行绑定window.scroll事件做滚动判断：fullPage.js默认通过CSS transform实现屏间滚动偏移，原生scroll事件获取的页面滚动值始终为0，会导致判断逻辑完全失效。
• 如果需要滚动触发时立刻切换header显隐、不想等滚动动画结束再切换，可以把afterLoad回调替换为onLeave回调，参数判断逻辑完全一致，交互响应会更跟手。
• 推荐用class切换代替内联样式控制显隐：比如根据状态给header拼接header-hidden类名，在CSS中对应写隐藏样式，还可以额外加透明度、位移过渡效果，体验比生硬的display切换更好。
• 若开启了fullpage的循环滚动、锚点跳转等功能，该判断逻辑依然生效，不需要额外做兼容处理。

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