Page({
? data: {
? ? navbarInitTop: 0, //導(dǎo)航欄初始化距頂部的距離
? ? isFixedTop: false, //是否固定頂部
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function() {
? ? var that = this;
? ? if (that.data.navbarInitTop == 0) {
? ? ? //獲取節(jié)點距離頂部的距離
? ? ? wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {
? ? ? ? if (rect && rect.top > 0) {
? ? ? ? ? var navbarInitTop = parseInt(rect.top);
? ? ? ? ? that.setData({
? ? ? ? ? ? navbarInitTop: navbarInitTop
? ? ? ? ? });
? ? ? ? }
? ? ? }).exec();
?
? ? }
? },
?
? /**
? ?* 監(jiān)聽頁面滑動事件
? ?*/
? onPageScroll: function(e) {
? ? var that = this;
? ? var scrollTop = parseInt(e.scrollTop); //滾動條距離頂部高度
? ? //判斷'滾動條'滾動的距離 和 '元素在初始時'距頂部的距離進行判斷
? ? var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
? ? // 只有處于吸頂?shù)呐R界值才會不相等
? ? 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 class="block">限時優(yōu)惠</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>
</block>

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: 80rpx;
? 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) 10%, rgba(0, 140, 255, 0.7) 90%);
}