微信小程序导航头部吸顶效果

功能描述：当页面滚动到该元素的时候，变成固定的导航头部，也就是固定在最上面，当往回滑动时又变成原来的样子。

基本原理是：

1.获取要吸顶元素到页面顶部的高度

2.监听页面已经滚动的高度

3.将要吸顶元素到页面顶部的高低和页面已经滚动的高度进行对比。当滚动距离大于等于要吸顶元素的高度时，变成吸顶状态；当滚动距离小于要吸顶元素的高度时，取消吸顶状态；

一、首先解决第一点：在页面加载出来时，onload事件中，拿到要吸顶元素到页面顶部的高度

data: {
    scrollTop: 0, // 页面滚动距离
    stickyHeight: 0, // 吸顶元素的高度
    isSticky: false // 是否吸顶
  },

onLoad: function (options) {
    // 获取需要吸顶元素的高度
    wx.createSelectorQuery().select('.recommend').boundingClientRect((rect) => {
      this.setData({
        // 这个top是节点的上边界坐标
        stickyHeight: rect.top
      })
      console.log(rect.top)
      console.log(this.data.stickyHeight)
    }).exec()
    
  },

二、监听页面已经滚动的高度

onPageScroll: function (e) {
    console.log(e)
    // 监听页面滚动事件
    this.setData({
      scrollTop: e.scrollTop
    })
    if (this.data.scrollTop >= this.data.stickyHeight) {
      // 当滚动距离大于等于吸顶元素的高度时，设置为吸顶状态
      this.setData({
        isSticky: true
      })
    } else {
      // 当滚动距离小于吸顶元素的高度时，取消吸顶状态
      this.setData({
        isSticky: false
      })
    }
  },

三、对比俩个高度，更改是否吸顶的值（isSticky）

onPageScroll: function (e) {
    console.log(e)
    // 监听页面滚动事件
    this.setData({
      scrollTop: e.scrollTop
    })
    if (this.data.scrollTop >= this.data.stickyHeight) {
      // 当滚动距离大于等于吸顶元素的高度时，设置为吸顶状态
      this.setData({
        isSticky: true
      })
    } else {
      // 当滚动距离小于吸顶元素的高度时，取消吸顶状态
      this.setData({
        isSticky: false
      })
    }
  },

本例使用的html结构：

<view class="recommend">
    <view class="recommend-box">
      <view class="{
   
   {isSticky?'recommend-head-fixed':'recommend-head'}}">
        <view class="head-left">
          <view class="title">
            <view>小浪推荐</view>
            <view class="line">|</view>
            <view class="small-title">镇店之宝</view>
          </view>
          <view class="bot-title">
            酒水新风潮
          </view>
        </view>
        <view class="head-right">
          全部>
        </view>
      </view>
      <view class="recommend-body">
      
      </view>
    </view>
  </view>

本例使用的css样式：

.recommend {
  width: 750rpx;
  height: 500rpx;
  background-color: #f9f9f9;
}
.head-left {
  width: 270rpx;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.small-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #e33652;
}
.bot-title {
  width: 120rpx;
  padding: 10rpx 0;
  font-size: 24rpx;
  color: #c04768;
  border-bottom: 4rpx solid #ec8b8b;
}
.line {
  font-size: 20rpx;
  color: #cccccc;
}
.head-right {
  display: flex;
  justify-content: flex-end;
  color: #fff;
  padding: 5rpx 20rpx;
  text-align: center;
  line-height: 40rpx;
  border-radius: 50rpx;
  background-color: #f72854;
  height: 40rpx;
  font-weight: 600;
  font-size: 22rpx;
}
.recommend-body {
  width: 100%;
  height: 1900rpx;
  background-color: aqua;
}
/* 吸顶元素的默认样式 */
.recommend-head {
  display: flex;
  justify-content: space-between;
  width: 690rpx;
  height: 96rpx;
  background-color: #f9f9f9;
  padding: 20rpx 30rpx 0 30rpx;
  border-bottom: 4rpx solid #999;
}

/* 吸顶元素的固定定位样式 */
.recommend-head-fixed {
  display: flex;
  justify-content: space-between;
  width: 690rpx;
  height: 96rpx;
  background-color: #fff;
  padding: 20rpx 30rpx 0 30rpx;
  border-bottom: 4rpx solid #fff;
  /* 吸顶样式 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}