小程序某标签滚动到某个位置时，固定在页面顶部

效果：我不知怎么上传视频效果。。。

方式一：用于要固定的元素前面的内容高度无法确定的情况下

js：代码

说明：这里选的指定元素不是导航栏本身，而是导航栏下面可滚动的内容，因为如果选择导航栏的话，它固定到顶部之后就无法恢复（因为它无法滑动，top值无法改变）。

//监听页面滚动
    onPageScroll:function(e){
        //获取指定元素距离页面顶部的距离
        let query = wx.createSelectorQuery();
        query.select('#nav').boundingClientRect((rect) =>{
            let top = rect.top;
            console.log(top);
            if(top<=45){  //这个45视情况而定
                this.setData({
                    fixedNav:true
                })
            }else{
                this.setData({
                    fixedNav: false
                })
            }
        }).exec()
    },

wxml:

<view>
        <view  class="nav {{fixedNav?'totop':''}}">
            <view bindtap="tonav" data-nav="nav1">楼盘概况 <text></text></view>
            <view bindtap="tonav" data-nav="nav2">户型图 <text></text></view>
            <view bindtap="tonav" data-nav="nav3">位置及周边 <text></text></view>
        </view>
        <scoll-view id="nav">
            <!-- nav1 -->
            <view id="nav1">
                nav1内容
            </view>
            <!-- nav2 -->
            <view id="nav2">
                nav2内容
            </view>
            <!-- nav3 -->
            <view id="nav3">
                nav3内容
            </view>
        </scoll-view>
    </view>

样式：

.totop{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color:#fff; 
}

方式二：用于要固定的元素前面的元素高度是固定的，以后维护不会改变的情况

主要区别在js:

//监听页面滚动
    onPageScroll:function(e){
        this.setData({
            scrollTop: e.scrollTop
        })
    },

wxml:（442视情况而定，就是要固定的元素前面内容的总高度）

​
<view>
        <view  class="nav {{scrollTop>442'totop':''}}">
            <view bindtap="tonav" data-nav="nav1">楼盘概况 <text></text></view>
            <view bindtap="tonav" data-nav="nav2">户型图 <text></text></view>
            <view bindtap="tonav" data-nav="nav3">位置及周边 <text></text></view>
        </view>
        <scoll-view id="nav">
            <!-- nav1 -->
            <view id="nav1">
                nav1内容
            </view>
            <!-- nav2 -->
            <view id="nav2">
                nav2内容
            </view>
            <!-- nav3 -->
            <view id="nav3">
                nav3内容
            </view>
        </scoll-view>
    </view>

​