小程序吸頂效果

需求：頁面滑動，滑到中間處有個組件須要固定在頂部，沒滑動時又恢復原位

先弄一個wxml文件，滑動到目標處就固定在頂部

<view class="news static-news"><text>今日新聞列表</text></view>
<view class="news fix-news" wx:if="{{fixTop<scrollTop}}"><text>今日新聞列表</text></view>

wxss裏面

.news.fix-news{
    position: fixed;
    top:0;
    left: 0;
}

js裏面

1.使用scroll-view組件,wxml裏面固定目標處包在<scroll-view scroll-y style="height: 100vh;" bindscroll="scroll"></scroll-view裏面

Page({
    data:{
        fixTop:'',//區域離頂部的高度
        scrollTop:0,//滑動條離頂部的距離
    },
    onShow:function(){
        let self=this;
        wx.createSelectorQuery().select('.static-news').boundingClientRect(function(rect){
           self.setData({
               fixTop:rect.top,
           })
        }).exec()
    },
    scroll:function(e){
        let self=this;
        let top=e.detail.scrollTop;
        self.setData({
            scrollTop:top
        });
    }
})

2.不使用scroll-view，利用頁面的onPageScroll方法

Page({
    data:{
        fixTop:'',//區域離頂部的高度
        scrollTop:0,//滑動條離頂部的距離
    },
    onShow:function(){
        let self=this;
        wx.createSelectorQuery().select('.static-news').boundingClientRect(function(rect){
           self.setData({
               fixTop:rect.top,
           })
        }).exec()
    },
    onPageScroll:function(res){
        let self=this;
        let top=res.scrollTop;
        self.setData({
            scrollTop:top
        });
    }
})

總結：ios手機滑動時比較流暢，安卓手機滑的慢點的話徹底ok，滑的快點會有些延遲，暫時沒找到啥好方法，若有好的實現方法，望各位賜教。
demo在github地址：sroll-view實現部分,普通view實現部分