react中 文章标题 随页面滚动显示隐藏

原理: 判断元素距离视口的高度 

Element.getBoundingClientRect() 返回方法返回元素的大小及其相对于视口的位置

 具体操作

第一步: 判断滚动条在那个元素身上

 第二步: 声明俩个ref 获取滚动条所在元素与你想隐藏的元素的判断dom

  // 声明一个状态决定头部 是否 显示隐藏
  const [isShowAuthor, setIsShowAuthor] = useState(false)
  // 滚动条元素所在
  const wrapperref = useRef<HTMLDivElement>(null)
  // 需要判断的元素
  const infoRef = useRef<HTMLDivElement>(null)


<div className="wrapper" ref={wrapperref}>
.....
.....
<div className="info" ref={infoRef}>
.....
.....

第三步 : 注册滚动事件与判断条件

useEffect(() => {
    // 监听滚动条事件
    const onscroll = () => {
      if (infoRef.current!.getBoundingClientRect().top < 0) {
        setIsShowAuthor(true)
      } else {