HTML
<div class="top"></div>
<div id="fixed"></div>
*{margin: 0;padding: 0;}
body{height: 1000px;}
.top{
width: 100%;
height: 200px;
background: blue;
}
#fixed{
width: 100%;
height: 50px;
background: #000;
top: 0;
}
.top-nav{position: fixed;}
$(window).scroll(function(){
//$(document).scrollTop()获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离
//$(window).height()是获取当前浏览器所能看到的页面的那部分的高度,这个大小在你缩放浏览器窗口大小时会改变
var $document = $(document).scrollTop()
if($document > 200 && $document < $(window).height()){
$("#fixed").addClass("top-nav");
}else if($document < 200 && $document){
$("#fixed").removeClass("top-nav")
}
})
小程序吸顶
<!--index.wxml-->
<view class="container">
<view id="scroll-list1" class="topBox {{isAllow?'fixed-scroll-list':''}}" style="top:{{isAllow?0:''}}px">
<view class="scroll-list flex-atw">
<view class="list-name {{ index == scrollIndex ? 'is-name':''}}" wx:for="{{shopCategoryList}}" wx:key="{{index}}">
<view class="item-name">{{item.name}}</view>
<view wx:if="{{index == scrollIndex}}" class='btn-line'></view>
</view>
</view>
</view>
</view>
<!--js-->
Page({
data: {
isAllow: false, // 是否运行滚动
bartop: 20,//导航栏距离顶部距离
shopCategoryList: [
{name: '标题1'},
{name: '标题2',},
{name: '标题3',},
],
},
onLoad: function() {
this.getHeigt()
},
getHeigt() {
//获取导航栏距离顶部距离
let that = this;
let query = wx.createSelectorQuery();
query.selectAll('#scroll-list1').boundingClientRect(function(rect) {}).exec(function(res) {
// 加载失败时重新获取高度
if (!res[0][0]) {
setTimeout(() => {
that.getHeigt()
}, 500)
return
}
let bartop = res[0][0]['top']; // 顶部bar距离顶部的距离
wx.getSystemInfo({
success: function(res) {
that.setData({
bartop: bartop
})
}
})
});
},
// 监听页面滚动
onPageScroll(e) {
let scrollTop = e.scrollTop;
//tab置顶
if (scrollTop >= this.data.bartop) {
if (this.data.isAllow) { return; }
this.setData({ isAllow: true });
} else {
if (!this.data.isAllow) { return; }
this.setData({ isAllow: false });
}
}
})