1、监听用户滑动屏幕
onPageScroll: function (e) {
console.log("滚动位置距离顶部:",e.scrollTop)
//给scrollTop重新赋值
this.setData({
scrollTop: e.scrollTop //页面当前顶部距离
})
}
2、获取view,id为box的当前位置状况
getScrollHeight: function(){
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) {
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
console.log("rec:",rect);
}).exec()
}
3、设置触发条件
<view id='box' style='width:50px;height:50px' class="{{scrollTop>=490 ? 'top black' : 'red'}}"></view>
4、始终动态固定在浏览器顶端
.top{
width:100%;
border-bottom:2px solid #000;
background-color:#fff;
font-size:14px;
transform: none;
position:fixed;
top:0;
}
.black{
background-color: #000000;
}
.red{
background-color: #c40000;
}