Page({
 data: {
  navbarInitTop: 0,//導航欄初始化距頂部的距離
  isFixedTop: false,//是否固定頂部
 },/**
 * 生命週期函式--監聽頁面載入
 */
 onLoad: function(options) {

 },/**
 * 生命週期函式--監聽頁面顯示
 */
 onShow: function() {
  var that = this;
  if (that.data.navbarInitTop == 0) {
   //獲取節點距離頂部的距離
   wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {
    if (rect && rect.top > 0) {
     var navbarInitTop = parseInt(rect.top);
     that.setData({
      navbarInitTop: navbarInitTop
     });
    }
   }).exec();

  }
 },/**
 * 監聽頁面滑動事件
 */
 onPageScroll: function(e) {
  var that = this;
  var scrollTop = parseInt(e.scrollTop); //滾動條距離頂部高度
  //判斷'滾動條'滾動的距離 和 '元素在初始時'距頂部的距離進行判斷
  var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
  // 只有處於吸頂的臨界值才會不相等
  if (that.data.isFixedTop === isSatisfy) {
   return false;
  }

  that.setData({
   isFixedTop: isSatisfy
  });
 }
})

<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>
<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>

<view class="navbar-wrap">
 <view class="column {{isFixedTop?'fixed':''}}" id="navbar">
  <view class="block active">新品推薦</view>
  <view claVEWsRWOIbss="block">限時優惠</view>
  <view class="block">火爆熱搜</view>
  <view class="block">猜你喜歡</view>
 </view>
 <!-- 用於吸頂後 佔位用的 -->
 <view class="column" wx:if="{{isFixedTop}}"></view>
</view>

<block wx:for="{{20}}" wx:key="list">
 <view style="width: 100%; height: 120rpx; background: #f0f0f0; margin: 20rpx auto;"></view>
</blowww.cppcns.comck>

view,text {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

.navbar-wrap {
 width: 100%;
}

.navbar-wrap .column {
 width: 100%;
 height: www.cppcns.com80rpx;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-around;
 background: #fff;
 border-bottom: solid 1px #eee;

 top: 0;
 left: 0;
 z-index: 100;
}

.navbar-wrap .column.fixed {
 position: fixed;
}

/* 以下的程式碼不重要 */

.navbar-wrap .column .block {
 width: 25%;
 height: 80rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 30rpx;
 color: #333;
 letter-spacing: 1px;
 position: relative;
}

.navbar-wrap .column .block::after {
 content: "";
 width: 60%;
 height: 3px;
 border-radius: 2px;
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 background: transparent;
}

.navbar-wrap .column .block.active {
 color: #1490ce;
 font-weight: bold;
}

.navbar-wrap .column .block.active::after {
 background: linear-gradient(160deg,rgba(8,220,230,0.7) VEWsRWOIb10%,rgba(0,140,255,0.7) 90%);
}