微信小程序根据页面滚动距离固定分类导航

根据要求，商品分类导航要做成图上效果，用了两种解决方案：

一、使用onPageScroll

  onPageScroll(e) {
    console.log(e);
    var top = e.scrollTop;
    this.setData({
      scrollTop:top
    })
  },

<view wx:if="{{ scrollTop >= 300 }}" class='itemBox'></view>
<view class="{{scrollTop >= 300 ? 'topnavFixed' : 'proItem'}}">
    <!-- 内容 -->
</view>

.proItem {
  background: #ffffff;
  z-index: 111;
  padding-left: 35rpx;
  height: 75rpx;
  border-top: 1rpx solid #f5f5f5;
  border-bottom: 1rpx solid #f5f5f5;
  box-sizing: border-box;
}
.itemBox{
  height: 75rpx;
}
.topnavFixed{
  background: #ffffff;
  z-index: 1111111;
  position: fixed;
  top: 0;
  height: 75rpx;
  width: 100%;
  padding-left: 35rpx;
  border-top: 1rpx solid #f5f5f5;
  border-bottom: 1rpx solid #f5f5f5;
}

使用此方法获取到页面滚动高度，然后根据与固定高度对比，使用三目运算判断小于固定高度时导航不固定，大于固定高度时导航固定在顶部。（此方法不推荐使用，因为不能使用固定高度，不同机型导航到页面顶部高度会有变化）。

二、使用scroll-view 的滚动事件获取页面滚动高度，使用wx.createSelectorQuery()获取元素高度

<scroll-view scroll-y='true' style='height:100%;' bindscroll="scroll">
  <view>
    <view class="container">
      <view class='box' hidden='{{!hidFirstView}}'>
        <view class='boxHeight'>
          <!-- 轮播图 -->
          <view class='banner'></view>
          <!-- 四个大按钮 -->
          <view class='buttonView'></view>
        </view>

        <!-- 商品分类 -->
        <view wx:if="{{ scrollTop >= boxHeight }}" class='itemBox'></view>
        <view class="{{scrollTop >= boxHeight ? 'topnavFixed' : 'proItem'}}">
          
        </view>

        <!-- 商品列表 -->
        <view class='proList' data-id='{{ item.id }}' bindtap='a' wx:for="{{productList}}">

          
        </view>

      </view>
    </view>

</scroll-view>

scroll:function(e){
  this.setData({
    scrollTop: e.detail.scrollTop
  })
},
//根据元素id获取元素高度，若此处元素是数据渲染生成的，则需要在页面渲染完成之后执行此方法，不然页面没渲染完成获取的这个元素高度会是0
var query = wx.createSelectorQuery();
    //选择id
    query.select('.boxHeight').boundingClientRect(function (rect) {
    that.setData({
       boxHeight: rect.height
    })
}).exec();

总结：

1、<view wx:if="{{ scrollTop >= 300 }}" class='itemBox'></view>这个一定要写，因为当导航固定的时候它会浮动起来，之前的占位消失，若不加一个占位view，会导致导航固定的时候导航下面的元素会忽然间向上跳动，用户体验很不好；

2、安卓真机上测试，导航会有轻微跳动现象，目前还没有找到解决方法；

===============补充===============

页面有的模块是经过请求数据后渲染出来的，此时若每个元素外层已经套了一层有固定高度的父元素，则  wx.createSelectorQuery 获取到 boxHeight 的高度就不会受渲染前后的影响；

若没有在外层套固定高度的父元素，此时 boxHeight 的高度就会受数据渲染速度影响。

建议：

要么，外层套一个有固定高度的父元素；

要么，在该请求数据接口成功的回调函数里使用 wx.createSelectorQuery；