微信小程序菜单栏滑动定位

需求：类似淘宝、京东的商品页，滑动到一定距离，菜单栏固定

html：

<view>
    <view class="text">顶部区域</view>
    <view id="main">
        <view id="nav" class="column {{isFixedTop?'fixed':''}}">
            <view class="swiper-tab-list active">美甲</view>
            <view class="swiper-tab-list">美发</view>
        </view>
        <view id="content" class="{{isFixedTop?'hasTop':''}}">
            内容区
        </view>
    </view>
</view>

css:

.text{
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
  background: #e0e0e0;
}
/* 导航 */

#nav {
  background: #fff;
  padding-top: 36rpx;
  width: 100%;
  border-bottom: 2rpx solid #f5f5f5;
}

#nav view {
  display: inline-block;
  font-size: 30rpx;
  font-weight: 500;
  margin: 0 8rpx 0 30rpx;
  color: #666a72;
  padding: 0 30rpx 12rpx;
}

#nav view.active {
  color: #000a2d;
  border-bottom: 8rpx solid #ffcf00;
  font-weight: bolder;
}

#main .column {
  width: 100%;
  height: 50rpx;
  left: 0;
  z-index: 100;
}

#main .column {
  top: 0;
}

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

#nav view.active {
  color: #000a2d;
  border-bottom: 8rpx solid #ffcf00;
  font-weight: bolder;
}
#content{
  height: 1700rpx;
  background: #EFEFEF;
  text-align: center;
  z-index: 7777;
}
.hasTop {
  margin-top: 86rpx;
}

js:

// pages/scrollToCeiling/scrollToCeiling.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isFixedTop: false, //是否固定顶部
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 粘性顶部  //获取节点距离顶部的距离
    let that = this,
    // 获取SelectorQuery 对象实例
      query = wx.createSelectorQuery();
    if (!that.data.navbarInitTop) {
      // 获取#nav的页面位置
      query.select('#nav').boundingClientRect(function (rect) {
        //rect.top 节点的上边界坐标
        if (rect && rect.top > 0) {
          var navbarInitTop = parseInt(rect.top);
          that.setData({
            navbarInitTop: navbarInitTop
          });
        }
      }).exec();
      //exec() 执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回
    }
  },
  /**
   * 监听页面滑动事件
  */
  onPageScroll: function (e) {
    var that = this;
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
    //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
    var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
    //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
    if (that.data.isFixedTop === isSatisfy) {
      return false;
    }
    that.setData({
      isFixedTop: isSatisfy
    });
    console.log(isSatisfy,scrollTop)
  },
})