如何解决React-Bootstrap导航栏滚动至110px时动画频繁触发问题

问题根源在于：当滚动位置接近110px临界值时，滚动事件会高频触发，window.pageYOffset可能在阈值上下小幅波动，导致navbar状态反复切换，样式来回切换引发闪烁。以下是两种有效修复方案：

方案一：添加滞后阈值（Hysteresis） #

设置上下两个不同的阈值，避免在临界值附近频繁触发状态变更：

• 向下滚动超过110px时，切换为小导航栏
• 向上滚动低于80px时，切换回原导航栏
• 80-110px区间内保持当前状态，不触发切换

修改后的代码：

import { useState, useEffect } from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { LinkContainer } from 'react-router-bootstrap';
import './Navbar.css';

// 重命名组件，避免和导入的Navbar组件冲突
const CustomNavbar = () => {
  const [navbar, setNavbar] = useState(false);

  const changeBackground = () => {
    if (window.pageYOffset >= 110) {
      setNavbar(true);
    } else if (window.pageYOffset <= 80) {
      setNavbar(false);
    }
    // 中间区间不做状态变更，避免频繁切换
  };

  useEffect(() => {
    window.addEventListener('scroll', changeBackground);
    return () => window.removeEventListener('scroll', changeBackground);
  }, []);

  return (
    <Navbar
      className={navbar ? 'shadow navSmall' : ''}
      bg={navbar ? 'light-subtle' : 'white'}
      variant="light"
      sticky="top"
      expand="lg"
    >
      {/* 导航栏内容 */}
    </Navbar>
  );
};

export default CustomNavbar;

方案二：防抖处理滚动事件 #

对滚动回调函数做防抖处理，减少短时间内的状态变更频率：

修改后的代码：

import { useState, useEffect, useCallback } from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { LinkContainer } from 'react-router-bootstrap';
import './Navbar.css';

// 防抖工具函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const CustomNavbar = () => {
  const [navbar, setNavbar] = useState(false);

  const changeBackground = useCallback(() => {
    setNavbar(window.pageYOffset >= 110);
  }, []);

  // 对滚动回调添加100ms防抖延迟
  const debouncedChangeBackground = useCallback(debounce(changeBackground, 100), [changeBackground]);

  useEffect(() => {
    window.addEventListener('scroll', debouncedChangeBackground);
    return () => window.removeEventListener('scroll', debouncedChangeBackground);
  }, [debouncedChangeBackground]);

  return (
    <Navbar
      className={navbar ? 'shadow navSmall' : ''}
      bg={navbar ? 'light-subtle' : 'white'}
      variant="light"
      sticky="top"
      expand="lg"
    >
      {/* 导航栏内容 */}
    </Navbar>
  );
};

export default CustomNavbar;

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