微信小程序实现滚动吸顶

1.实现效果

滚动吸顶.gif

2.实现原理

方法一：position:sticky简单粗暴，但存在部分机型不支持

1.position:sticky( position: -webkit-sticky):
类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

eg：

.box{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

方法二：监听页面滚动onPageScroll，可能会存在卡顿

onPageScroll： 监听页面滚动，避免在 onPageScroll 回调中每次都调用 setData。

eg：

onPageScroll: function (e) {
    let scrollTop = parseInt(e.scrollTop)；//滚动条距离顶部高度
 }

3.实现代码

方法一：在需要吸顶的页面整体元素添加position: sticky;

position: sticky;
position: -webkit-sticky;
top: 0; 

方法二：在onPageScroll中去动态判断当前距离顶部高度的状态

onPageScroll: function (e) {
    let scrollTop = parseInt(e.scrollTop),//滚动条距离顶部高度
      isFixed = scrollTop >= this.data.navTop
    if (this.data.isFixed !== isFixed) {
      this.setData({
        isFixed,
      });
    }
  }

完整代码

<!--pages/wxCase/sticky/index2.wxml-->
<view class="head_title">
  <view class="mb20">方法一：position: sticky，简单粗暴，存在部分机型不支持，<navigator url="/pages/wxCase/sticky/index">去查看</navigator>
  </view>
  <view>方法二：监听页面滚动onPageScroll，存在卡顿</view>
</view>
<view class="hd {{isFixed&&'fixed'}}" id="nav">
  <block wx:for="{{navList}}" wx:key="navList">
    <view class="hd_flex {{nav_type == index ? 'hd_flex_on' : ''}}" catchtap="changeType" data-index="{{index}}">{{item}}
    </view>
  </block>
</view>
<view class="content">
  <block wx:for="{{nav_type==0?20:nav_type==1?0:4}}" wx:key="list">
    <view>{{index+1}}</view>
  </block>
</view>

/* pages/wxCase/sticky/index2.wxss */
.head_title {
  background: #EECDA3;
  background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);
  background: linear-gradient(to right, #EF629F, #EECDA3);
  height: 300rpx;
  color: #fff;
  font-size: 25rpx;
  padding: 20rpx;
  box-sizing: border-box;
}
.hd {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  background: #fff;
  margin-bottom: 10rpx;
  box-shadow: 0rpx 5rpx 5rpx #ccc;
  /* 方法一：滚动吸顶 */
  /* position: sticky;
  position: -webkit-sticky;
  top: 0; */
}
.hd .hd_flex {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.hd .hd_flex_on {
  font-size: 30rpx;
  background-clip: text;
  -webkit-background-clip: text;
  /* 规定背景的绘制区 */
  color: transparent;
  background-image: -webkit-linear-gradient(to right, #EF629F, #EECDA3);
  background-image: linear-gradient(to right, #EF629F, #EECDA3);
  position: relative;
  transition: 0.3s all linear;
  transition-delay: 0.1s;
}
.hd .hd_flex::after {
  content: "";
  position: absolute;
  bottom: 4rpx;
  width: 0%;
  height: 6rpx;
  background-image: -webkit-linear-gradient(to right, #EF629F, #EECDA3);
  background-image: linear-gradient(to right, #EF629F, #EECDA3);
  border-radius: 3rpx;
  left: 50%;
  transform: translateX(-50%);
}
.hd .hd_flex_on::after {
  width: 40%;
  transition: 0.3s width linear;
}
.content view {
  background: #fff;
  height: 50rpx;
  line-height: 50rpx;
  border-bottom: 1rpx solid #eaeef1;
  padding: 20rpx;
  color: #999;
  text-align: center;
}
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

// pages/wxCase/sticky/index2.js
Page({

  data: {
    navList: ['正在进行', '即将开始', '已结束'],
    nav_type: 0,
    isFixed: false,
    navTop: 0, //距离顶部距离
  },
  changeType: function (e) {
    let {
      index
    } = e.currentTarget.dataset;
    if (this.data.nav_type === index || index === undefined) {
      return false;
    } else {
      this.setData({
        nav_type: index,
      })
    }
  },
  onLoad: function (options) {

  },

  onReady: function () {
    if (this.data.navTop == 0) {
      //获取节点距离顶部的距离
      wx.createSelectorQuery().select('#nav').boundingClientRect((rect) => {
        if (rect && rect.top > 0) {
          this.setData({
            navTop: parseInt(rect.top)
          });
        }
      }).exec();
    }
  },


  /**
   * 监听页面滑动事件
   */
  onPageScroll: function (e) {
    let scrollTop = parseInt(e.scrollTop),//滚动条距离顶部高度
      isFixed = scrollTop >= this.data.navTop
    if (this.data.isFixed !== isFixed) {
      this.setData({
        isFixed,
      });
    }
  }
})

4.更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！