上滑吸顶功能

功能描述:当页面上滑到导航时,导航吸顶

解决思路:利用onPageScroll函数来监听页面上滑的距离,然后绑定数据,改变导航栏的样式

onPageScroll = (e) => {
        let menuTop = 87;  //当距离不确定时,可以用createSelectorQuery来测量
        if (e.scrollTop > menuTop) {
            this.setState({
                isFixed: true
            })
        } else {
            this.setState({
                isFixed: false
            })
        }
    };

 

//样式
.tag-fixed{
    position:fixed;
    top:0;
    z-index:99;
    background-color: #fff;
    box-shadow: 0 4px 10px 0 rgba(232,232,232,0.60);
  }