上滑吸頂功能

功能描述:當頁面上滑到導航時,導航吸頂

解決思路:利用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);
  }