​
wxml部分

<view class=" {{menuFixed ? 'fixed': ''}}" id="affix">選單欄</view>

wxss部分

.fixed{position: fixed; top: 0; }

js部分

onShow: function () {

var that = this;

var query = wx.createSelectorQuery()//建立節點查詢器 query

query.select('#affix').boundingClientRect()//這段程式碼的意思是選擇Id= the - id的節點，獲取節點位置資訊的查詢請求

query.exec(function (res) {

     / / console.log(res[0].top); // #affix節點的上邊界坐

     that.setData({

        menuTop: res[0].top

     })

});

},

// 2.監聽頁面滾動距離scrollTop

onPageScroll: function (e) {

// console.log(e.scrollTop);

var that=this;

// 3.當頁面滾動距離scrollTop > menuTop選單欄距離文件頂部的距離時，選單欄固定定位

if (e.scrollTop > that.data.menuTop){

that.setData({

menuFixed: true

})

}else{

that.setData({

menuFixed: false

})

}

​