微信小程序 導航tab切換，跟隨滾動置頂

<view class="small_nav {{tabFixed?'small_navFix':''}}" id="tab-con">
    <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}">
      <view class="small_nav_scroll">
        <view class="{{id==''?'cur':' '}}"   data-id=""  bindtap="switchNav">所有</view>
        <view class="{{id==item.categoryId?'cur':' '}}"  wx:for="{{typeList}}" wx:key="index" data-id="{{item.categoryId}}" data-index="{{index}}" bindtap="switchNav">{{item.categoryName}}</view>
      </view>
    </scroll-view>
</view>
<view style="height:3000rpx;">
  這是內容
</view>

.small_nav{width:100%; background: #fff; font-size: 26rpx;margin-bottom:20rpx;}
.small_nav_scroll{ display: flex; height:80rpx;line-height:80rpx; flex-direction: column; flex-wrap: wrap;  }
.small_nav_scroll>view{  padding:0 5rpx; margin:0 25rpx;text-align: center; position:relative;}
.small_nav_scroll>view.cur{ color:#000;}
.small_nav_scroll>view.cur:after{content: " ";position: absolute;left:0; bottom:0; width:100%;height:5rpx; background: #36ccf9}
.small_navFix{width:100%;height:auto; position: fixed;top:0; left:0; z-index: 20}

// pages/test/test.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    scrollLeft: 0,
    id: "",
    typeList: [
      {
        categoryId: 1,
        categoryName: "分類1"
      },
      {
        categoryId: 2,
        categoryName: "分類2"
      },
      {
        categoryId: 3,
        categoryName: "分類3"
      },
      {
        categoryId: 4,
        categoryName: "分類4"
      },
      {
        categoryId: 5,
        categoryName: "分類5"
      },
      {
        categoryId: 6,
        categoryName: "分類6"
      },
      {
        categoryId: 7,
        categoryName: "分類7"
      },
      {
        categoryId: 8,
        categoryName: "分類8"
      },
      {
        categoryId: 9,
        categoryName: "分類9"
      }
    ]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    var that = this;
    var query = wx.createSelectorQuery()
    query.select('#tab-con').boundingClientRect(function (res) {
      that.setData({
        tabScrollTop: res.top + 100   //根據實際需求加減值
      })
    }).exec()
  },
  onPageScroll: function (e) { // 獲取滾動條當前位置
    if (e.scrollTop > this.data.tabScrollTop) {
      this.setData({
        tabFixed: true
      })
    } else {
      this.setData({
        tabFixed: false
      })
    }
  },
  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  },
  //切換產品類別
  switchNav: function (e) {
    const { offsetLeft } = e.currentTarget;
    const { id, index } = e.currentTarget.dataset;
    var clientX = e.detail.x;
    if (this.data.id == e.currentTarget.dataset.id) {
      return false;
    }
    if (clientX < 60) {
      this.setData({
        scrollLeft: offsetLeft - 60
      });
    } else if (clientX > 330) {
      this.setData({
        scrollLeft: offsetLeft
      });
    }
    this.setData({
      id: id
    });
  },
})