功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子。
基本原理是:
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;
}
扫描二维码关注公众号,回复:
15537012 查看本文章