react 吸顶实现

今天获取到一个需求，其实就是吸顶的需求，页面下滑，某一块dom隐藏时发生吸顶现象。这种特效其实老生常谈了，但是在这次做的时候，突发奇想，能否将其做成一个 hook ，从而实现出传递ref即可使得 dom 产生吸顶。原理其实很简单，但移动至隐藏时，设置接收的 dom 元素或者 ref ，使其 style 附上 fixed 定位。在做的过程中，遇到了许多问题，接下来一一道来

首先先讨论下，一般大家常用的吸顶方法

由于本章主要针对于react的开发，因此若是使用别的框架，就当看个热闹吧

网上还有其他的，纯操作原生js实现吸顶特效，在此就不赘述这些原生的了

解法一：css解决

css解决吸顶，大家自然而然想到的是粘性定位：sticky

由于我页面的复杂程度较高，未能用 sticky 实现吸顶。但也去查了查粘性定位的使用，发现限制不仅多，而且兼容性有待商榷。当然移动端不考虑这些，可以通过css实现的，自然是最好的，性能自然也是最好的。

position: sticky;

top: 0;    /*top/right/bottom/left 任一有效值*/

使用 sticky 的时候，应当注意，别忘记 top （即吸顶的时候距离顶部距离为0）等有效值设置

当你使用粘性定位失效的可能性如下：

一、只在可滚动父元素内有效

用一个 div 把 div.sticky 包裹起来，发现 Sticky 效果失效，当使用 Sticky 时，其实需要确保包含Sticky 的父元素有可滑动的高度。

sticky的规则是：当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

当div.sticky移动至父元素顶部时，就会触发吸顶的效果。

二、兼容性问题

直接上图，最为方便

解法二：react 配合ahook使用

此法仅在react框架中使用，且需安装ahook依赖

我们使用ahook中的useScroll监听页面的滚动，在页面滚动的过程中，判断需吸顶的元素是否处于可视区域，若不处于可视区域，则直接吸顶

 const [searchHidden, setSearchHidden] = useState<boolean>(false); // 设置是否吸顶的标识

  const [height, setHeight] = useState<number>(0);// 获取吸顶元素距离顶部的高度

  const searchRef = useRef(null);// 吸顶ref

  const scroll = useScroll(document);

  useEffect(() => {

    setTimeout(() => {

      setHeight(searchRef?.current?.getBoundingClientRect().top)// 设置元素距离顶部的高度

    }, 0);

  }, [])

  useEffect(() => {
// 监听滚动，超出高度则吸顶

    if (scroll.top <= height) {

      if (searchHidden && searchRef.current) {

        searchRef.current.style = '{}'

        setSearchHidden(false)

      }

    } else {

      if (!searchHidden && searchRef.current) {

        setSearchHidden(true)

        searchRef.current.style.position = 'fixed';

        searchRef.current.style.top = '0';

        searchRef.current.style.zIndex = '999';

      }

    }

  }, [JSON.stringify(scroll)])

此处代码应当注意以下几点

useScroll 是ahook的函数，需安装ahook依赖
使用定时器设置元素距离顶部的高度，是为了使得该渲染完的dom渲染完之后，获取真实的高度

解法三：react-sticky

SS 属性 position: sticky 可以替代 react-sticky，但是它（position: sticky）的浏览器兼容不是很好，尤其是不支持 IE11 和 table 元素的一些 bug，在使用 react-sticky 之前，检查一下如果浏览器支持和限制阻止你使用 position: sticky，因为 CSS 总是比 JS 更快和耐用

基本使用如下：

<StickyContainer>

  <Sticky>{({ style }) => <h1 style={style}>Sticky element</h1>}</Sticky>

</StickyContainer>

需要使用StickyContainer对需要吸顶的元素进行包裹，后续有时间，想试着阅读下rsticky 的源码，将此进行包裹就可实现吸顶，但是对于UI较为复杂的页面来说，js 的代码控制最为方便。