React固定导航栏覆盖指定元素时添加边框的最优实现方案咨询

硬编码滚动区间的方案可维护性极差，只要后续调整布局（比如修改导航栏高度、目标元素位置、增减页面其他模块），预设的数值就会失效，推荐以下两种更稳定的实现方案：

方案1：动态计算元素位置（滚动监听方案） #

原理是通过getBoundingClientRect()实时获取导航栏和目标元素的视口位置，动态判断两者是否重叠，不需要写死任何像素值。

import { useState, useEffect, useRef } from 'react';

export const NavBar = ({ targetRef }) => {
  const navRef = useRef(null);
  const [isOverlap, setIsOverlap] = useState(false);

  const checkOverlap = () => {
    if (!navRef.current || !targetRef.current) return;
    const navRect = navRef.current.getBoundingClientRect();
    const targetRect = targetRef.current.getBoundingClientRect();
    // 垂直方向重叠判断规则：导航栏底部 > 目标元素顶部 && 导航栏顶部 < 目标元素底部
    const overlap = navRect.bottom > targetRect.top && navRect.top < targetRect.bottom;
    setIsOverlap(overlap);
  };

  useEffect(() => {
    checkOverlap(); // 初始化时检测一次
    window.addEventListener('scroll', checkOverlap);
    return () => window.removeEventListener('scroll', checkOverlap);
  }, [targetRef]);

  return (
    <div 
      ref={navRef} 
      className="navbar" 
      style={{ borderBottom: isOverlap ? '2px solid black' : 'none' }}
    >
      this is navbar
    </div>
  );
};

const Content = ({ targetRef }) => {
  return ( 
    <div className="main">
      <div ref={targetRef} className="background">
        some content
      </div>
    </div>
  );
};

const App = () => {
  const contentTargetRef = useRef(null);
  return (
    <>
      <NavBar targetRef={contentTargetRef} />
      <Content targetRef={contentTargetRef} />
    </>
  );
}

ReactDOM.render(<App/>, document.body);

方案2：Intersection Observer API（更推荐，性能更优） #

滚动监听事件会在滚动时高频触发，性能开销较大。Intersection Observer是浏览器原生提供的交叉观察API，异步执行回调，性能更好，尤其适合这类元素可见性/重叠判断场景。

import { useState, useEffect, useRef } from 'react';

export const NavBar = ({ targetRef }) => {
  const navRef = useRef(null);
  const [isOverlap, setIsOverlap] = useState(false);

  useEffect(() => {
    if (!targetRef.current || !navRef.current) return;
    // 根边距设置为负的导航栏高度，相当于缩小视口顶部的观察范围，目标元素进入导航栏覆盖区域时触发回调
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        setIsOverlap(entry.isIntersecting);
      });
    }, {
      rootMargin: `-${navRef.current.offsetHeight}px 0px 0px 0px`,
      threshold: 0
    });

    observer.observe(targetRef.current);
    return () => observer.disconnect();
  }, [targetRef]);

  return (
    <div 
      ref={navRef} 
      className="navbar" 
      style={{ borderBottom: isOverlap ? '2px solid black' : 'none' }}
    >
      this is navbar
    </div>
  );
};

// Content、App组件逻辑和方案1完全一致
const Content = ({ targetRef }) => {
  return ( 
    <div className="main">
      <div ref={targetRef} className="background">
        some content
      </div>
    </div>
  );
};

const App = () => {
  const contentTargetRef = useRef(null);
  return (
    <>
      <NavBar targetRef={contentTargetRef} />
      <Content targetRef={contentTargetRef} />
    </>
  );
}

ReactDOM.render(<App/>, document.body);

两种方案均无硬编码的固定像素值，后续布局调整不需要修改逻辑代码，同时可适配不同设备尺寸，不会因为屏幕分辨率差异出现判断偏差。

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