微信小程序带吸顶效果的导航栏

有时候做微信小程序商城的时候要做可以左右滑动又有吸顶效果的导航栏，最近刚做过一个，不多说直接上代码。

.wxml

<view class="limit_save fix-save" wx:if="{{fixTop<scrollTop}}"><view class='save_choose'><scroll-view class="scroll-view_H" scroll-x="true" scroll-left="{{navScrollLef}}" scroll-with-animation="{{false}}"><block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"><view class="nav-name {{currentTab == idx ?'active':''}}" data-current="{{idx}}" data-gtype="{{navItem.orderNum}}" bindtap="switchNav">{{navItem.name}}</view></block></scroll-view></view></view><view class="limit_save staic-save" wx:else=""><view class='save_choose'><scroll-view class="scroll-view_H" scroll-x="true" scroll-left="{{navScrollLeft}}"><block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"><view class="nav-name {{currentTab == idx ?'active':''}}" data-current="{{idx}}" data-gtype="{{navItem.orderNum}}" bindtap="switchNav">{{navItem.name}}</view></block></scroll-view></view></view>

.js

data{fixTop: 760, //区域离顶部的高度scrollTop: 0, //滑动条离顶部的距离}// 获取滚动条当前位置onPageScroll: function (e) {let self = this;let top = e.scrollTop;if (e.scrollTop > 100) {this.setData({floorstatus: true});} else {this.setData({floorstatus: false});

第一次写，有错误的地方请指正。