小程序 -- 吸顶效果

​
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

})

}

​