根据滚动高度显示某内容

介绍：滚动到一定高度后显示数据，使用 useEffect 钩子来监听页面滚动事件，并根据滚动的高度来控制数据的显示。

概念：使用 useEffect 钩子来监听滚动事件，当滚动高度超过 200 时设置 showData 状态为 true，从而显示数据。当滚动高度小于 200 时则隐藏数据。实现滚动到一定高度后显示数据的效果。

import React, { useEffect, useState } from 'react';
import './index.less';  //样式文件引入

export default function CeshiApp() {
  const [showData, setShowData] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 200) { // 当滚动高度大于200时显示数据
        setShowData(true);
      } else {
        setShowData(false);
      }
    };

    window.addEventListener('scroll', handleScroll); // 添加滚动事件监听

    return () => {
      window.removeEventListener('scroll', handleScroll); // 组件卸载时移除事件监听
    };
  }, []);

  // ... 其他代码

  return (
    <div>
      // 根据 showData 的状态来控制数据显示
      {showData && ( 
        <div>
          {/* 这里放置要显示的数据 */}
          <h2>滚动到一定高度后显示的数据</h2>
        </div>
      )}
      {/* 其ta界面内容 */}
    </div>
  );
}