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,
});
}
}
})
