微信小程序开发记录（二）菜单栏或者某个元素吸顶功能实现

直接上代码：

wxml：

<view class=" {{menuFixed ? 'fixed': ''}}" id="fix">某元素</view>

wxss:

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

js:

data:{
        menuTop:''
    },
onshow:function(){
    var that =this;
    var query = wx.createSelectorQuery()//创建节点查询器 query
        query.select('#fix').boundingClientRect()//选择Id的节点，获取节点位置信息的查询请求
        query.exec(function (res) {
          console.log(res[0].top); // #fix节点的上边界坐标
          that.setData({
            menuTop: res[0].top
          })
        });
    },
/**
 * 监听滚动事件
 */
  onPageScroll: function (e) {
    console.log(e);//{scrollTop:99}
    var that = this;
    //当页面滚动距离scrollTop > menuTop某元素距离文档顶部的距离时，某元素固定定位
    if (e.scrollTop > that.data.menuTop) {
      that.setData({
        menuFixed: true
      })
    } else {
      that.setData({
        menuFixed: false
      })
    }
  }

以上内容即可实现某元素滑动到顶部时，定位到顶部，向下滑动时恢复原来位置。