react原生函数实现页面滚动到一定高度后显示悬浮按钮

需求背景：当页面很长的时候，我们希望当滑过某一按钮后，它能在接下来的区域以一个小的悬浮按钮的形式固定在页面右侧，类似于一键回到顶部那种按钮的效果，不过这个按钮的事件我们可以随意添加，不一定是要用来回到页面顶部。

整体逻辑就是 监听页面滚轮高度 当达到某个值以后 将按钮的display值置为block 让他展示出来 用的是react hook

代码如下：

import { useEffect, useState } from 'react';
import Icon from '@/assets/img/ContactUs.png';


const Home = () => {
  const [open, setOpen] = useState(false);
  // 为按钮设置style 控制显示与隐藏
  const [eleStyle, setEleStyle] = useState({});

  useEffect(() => {
    // 给当前window添加监听
    window.addEventListener('scroll', handleScroll);
    handleScroll();
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  function handleScroll() {
    // 获取当前页面高度
    const _scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
    // 当页面高度 >= 700 的时候 显示这个悬浮的按钮
    if (_scrollTop >= 700) {
      setEleStyle({ display: 'block' });
    } else {
      setEleStyle({});
    }
  }

  // 给按钮添加的事件 控制某个弹窗的展示
  const toggleDialog = (show) => {
    setOpen(show);
  };

  return (
    <div className="homepage">
       <img
         src={Icon}
         // 样式写在css文件里面 设置一个classname
         className="homepage-icon"
         style={eleStyle}
         // 我加的点击事件
         onClick={() => toggleDialog(true)}
       />
       // 我加这个悬浮按钮是为了方便控制下面这个弹窗的展示与否
      <Contact isDialog open={open} onHide={() => toggleDialog(false)} id="contact" />
      ...
    </div>
  );
};


export default Home;

/* 按钮原本是隐藏的 用js根据条件来选择性的展示 要想让它固定在页面某个位置 需要用固定定位 */
.homepage-icon {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 390px;
    z-index: 99;
}
/* 鼠标hover的时候 变成一个小手  */
.homepage-icon:hover {
  cursor: pointer;
}