微信小程序吸顶功能

---------------------------HTML------------------------

<view class="navbar-wrap">
  <view class="column {{isFixedTop?'fixed':''}}" id="navbar">
    <view class="block active">新品推荐</view>
    <view class="block">限时优惠</view>
    <view class="block">火爆热搜</view>
    <view class="block">猜你喜欢</view>
  </view>
  <!-- 用于吸顶后 占位用的 -->
  <view class="column" wx:if="{{isFixedTop}}"></view>
</view>

<view class="list {{isFixedTop?'martop':''}}">列表数据</view>

---------------------------CSS------------------------

.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;
}

.martop{

margin-top: "吸顶对象的高度"

}

------------------------JS-------------------------

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;
　//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
　if (that.data.isFixedTop === isSatisfy) {
　　return false;
　}

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

})