微信小程式--特定區域滾動到頂部時固定

項目要求：

如圖所示，當頁面滾動到導覽列到達搜尋欄下方時固定，向上滾動到導覽列位置時又恢複原樣。

以下是代碼展示：

1.wxml

<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
    <view class="{{top>130 ? 'topnav' : ''}}">
    <--這裡寫大于，表示距離頂部130rpx時固定，可根據需要修改-->
        ...
    </view>
</scroll-view>
           

2.wxss

.topnav{
    position: fixed;
    top: rpx;
    z-index:;
    background: #fff;
    width: %;
}
           

3.js

data = {
  top:0
}
//控制回到頂部按鈕的顯示與消失
scrollTopFun(e){
    let that = this;
    that.top = e.detail.scrollTop;
    that.$apply();
}
           

其實整個思路很簡單， 小程式自帶的元件scroll-view自帶有屬性bindscroll（滾動時觸發）。通過這個屬性擷取浏覽器滾動條距離頂部的位置，通過這個位置判斷class類的顯示就可以了。