react项目中实现滚动页面后 导航栏固定在页面顶部

在很多大型官方的网站上，都会有导航栏随着页面滚动后，固定在页面顶部，方便用户操作的功能，下面我们来实现一下。

1.思路

首先，我们想固定在页面顶部，那就是设置了position为fixed；其次，我们用什么判断设置fixed的时机：那就是在页面上的位置。

我们可以使用 节点.offsetTop 获取到当前节点距离顶部的位置，document.documentElement.scrollTop可以获取到滚动页面距离顶部的位置，那么只要 页面滚动的垂直距离 > 导航栏距离顶部的距离，换句话就是说已经滑动过了导航栏的位置，那么我们就可以给它设置一个属性，就是position: fixed

2.代码实现

const navRef: any = React.createRef();
const [is_fixed, set_is_fixed] = useState(false);

useEffect(() => {
        const fixedTop = navRef.current.offsetTop;
        window.onscroll = () => {
            let scrollTop = document.documentElement.scrollTop;
            const isFixed = scrollTop >= fixedTop;
            set_is_fixed(isFixed);
          }
}, [])


<div className={`apps_navs ${is_fixed ? 'fixedTop' : ''}`} ref={navRef}>
    我是导航栏
</div>

我们使用createRef获取了节点，使用他们的位置比较判断是否设置fixed属性的class：fixedTop，完成。

3.结果展示

初始化是这样

滑动后

TIPS：写ref的组件不能写在useEffect中，踩过坑，我觉得应该是页面的类型的问题导致拿不到节点。