react悬浮效果

1.componentDidMount设置监听滚动事件，页面上的overflow-y:scroll需要去掉，不能限定滚动div的高度

//监听页面滚动
document.addEventListener('scroll', this.trackScrolling);

2.设置滚动监听执行方法

//监听滚动事件,设置头部悬浮效果
trackScrolling(){
    const wrappedElement = document.getElementById('sy-db-table');
    //页面元素距离浏览器工作区顶端的距离
    let tabTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
    let cc = wrappedElement.offsetTop - tabTop;
    // console.log(wrappedElement.offsetTop,tabTop,cc)
    if(cc <= 38){
        // console.log(cc)
        $('.sy-scroll').css({position:'fixed',top:38})
    }else {
        $('.sy-scroll').css({position:'relative',top:0})
    }
};

3. componentWillUnmount方法移除监听

document.removeEventListener('scroll', this.trackScrolling);

转载于:https://my.oschina.net/linxiaoxi1993/blog/3060982