微信小程序--分類選擇區域滾動到頂部時固定

 實現思路：根據小程序自帶的組件scroll-view自帶有屬性bindscroll（滾動時觸發）。通過這個屬性獲取瀏覽器滾動條距離頂部的位置，通過這個位置判斷class類的顯示就可以了

效果：

           

<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
	<view class="top_tab_bo">
		<scroll-view scroll-x="true" class="{{top>600 ? 'topnav' : ''}}">
        <--這裏寫大於600，表示距離頂部600rpx時固定，可根據需要修改-->
			<view class="flexRow tab_bo">
				<block wx:for="{{lay_list}}">
					<view class="tab" bindtap="lay_tab" data-index="{{index}}">
						<view class="tetx {{index==tab_index?'tetx_':''}}">{{item}} </view>
						<view class="{{index==tab_index?'_':''}}"></view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</scroll-view>

 

/* 分類篩選 */
.lay .top_tab_bo{
  margin:20rpx ;
}
.lay scroll-view{
width:100%;
padding: 20rpx 0  0rpx 0;

}
.lay .topnav{
  position: fixed;
  top:0rpx;
  z-index:99;
  background: #fff;
  padding: 20rpx 0  ;
}

data:{
        // 分類列表
    lay_list: ['推薦', '彩妝護膚', '皮膚管理', '除皺瘦臉', '玻尿酸', '更多'],
    // 分類列表切換
    top: 0,
    // 分類列表樣式
    tab_index: 0
  }

  // 分類切換
   lay_tab(e) {
    let index = e.currentTarget.dataset.index
    this.setData({
      tab_index: index
    })
  },
  // 監測底部分類浮動頂部
  scrollTopFun(e) {
    let that = this;
    this.setData({
      top: e.detail.scrollTop
    })
  },