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
})
}