小程序中，滑动页面，当导航到顶端时固定在页面顶端

wxml部分

// 导航以上的内容
<view id='header' style='height:200rpx;background-color:#00f;'></view>
// 导航
<view class="list_item {{curClass}}">
  <view class="all_item {{checkedType == 'all'?'checked':''}}" catchtap='changeType' data-v="all">全部</view>
  <view class="income {{checkedType == 'in'?'checked':''}}" catchtap='changeType' data-v="in">收入</view>
  <view class="payfor {{checkedType == 'out'?'checked':''}}" catchtap='changeType' data-v="out">支出</view>
</view>
// 其余内容
<view style='height:2000rpx'></view>

js部分

Page({
  // 页面的初始数据
  data: {
    checkedType: 'all',
    curClass: '',
  },

  // 切换导航
  changeType(e) {
    this.setData({
      checkedType: e.currentTarget.dataset.v
    });
  },

  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    var that = this;
    wx.createSelectorQuery().select('#header').boundingClientRect(function(rect){
      rect.height; // 节点高度
    }).exec(function(res){
      that.headerHeight = res[0].height;
    })
    wx.createSelectorQuery().select('.list_item').boundingClientRect(function (rect) {
      rect.height; // 节点高度
    }).exec(function (res) {
      that.itemHeight = res[0].height;
    })
  },

  // 页面滚动
  onPageScroll(e) {
    if (e.scrollTop >= this.headerHeight && !this.data.curClass){
      // 当页面顶端距离大于一定高度时
      this.setData({
        curClass:'item_fix'
      })
    } else if (e.scrollTop <= this.headerHeight && this.data.curClass){
      this.setData({
        curClass: ''
      })
    }
  }
})

wxss内容

……

.item_fix{
  position: fixed;
}

可下载 → 代码片段