React吸顶效果：用原生JS和React Hook巧妙实现

2024-01-02 21:22:29

用原生JavaScript实现吸顶效果

吸顶效果在web开发中十分常见，它允许网页中的特定元素（通常是导航栏）在用户向下滚动页面时保持固定在页面顶部。使用原生JavaScript实现吸顶效果涉及以下步骤：

监听滚动事件： 使用window.addEventListener('scroll', callback)监听浏览器的滚动事件。
检查滚动位置： 在回调函数中，检查当前的滚动位置（window.scrollY或document.documentElement.scrollTop）。
添加或移除CSS类： 如果滚动位置达到特定阈值，则向目标元素添加一个CSS类（例如.sticky），该类包含将元素固定在顶部的样式。否则，移除该CSS类。

这种方法简单直接，但需要手动管理CSS类和滚动事件监听器，这在复杂项目中可能会变得繁琐。

用React Hook实现吸顶效果

React Hook为我们提供了更声明式的处理状态和副作用的方法。我们可以使用useRef和useEffect Hook来实现吸顶效果：

import { useRef, useEffect } from 'react';

const Sticky = (props) => {
  const ref = useRef(null);

  useEffect(() => {
    const stickyElement = ref.current;

    const handleScroll = () => {
      if (stickyElement) {
        if (window.scrollY > stickyElement.offsetTop) {
          stickyElement.classList.add('sticky');
        } else {
          stickyElement.classList.remove('sticky');
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

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

  return <div ref={ref}>{props.children}</div>;
};