做这个效果的前提：掌握offset系列 ,掌握scroll系列
offsetWidth:元素的内容宽+左右padding+左右border
offsetHeight:元素的内容高+上下padding +上下border
offsetTop :当前元素的顶部，到定位父元素的距离，如果没有定位父元素，指的就是元素到body的距离 -----用于获取当前元素在页面中的位置
offsetLeft: 当前元素的左边，到定位父元素的距离，如果没有定位父元素，指的就是元素到body的距离
onscroll:滚动条触发的事件，只要滚动条滚动就会触发，滚动条在谁身上就给谁加滚动条
这是屏幕的滚动距离
document.documentElement.scrollTop || document.body.scrollTop
给屏幕添加滚动事件
window.onscroll=function(){
//获取滚动距离，提前给body设置高度
var top=document.documentElement.scrollTop || document.body.scrollTop
}
实现效果
向下滚动的时候：
到达一定高度的时候，红色的div会固定在顶部
项目中常用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题
常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动
解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到flex=1元素的外层，吸顶的元素需要用两个div，一个是正常显示的，一个是滚动到一定高度固定到顶部的
html:
<div class="wrap" id="wrapId">
<div class="isFixed" v-if="is_fixed">
<div class="topBar" id="fixedTopFixed" ref="topBar">
<div class="item" v-for="(item,index) in barList" >吸顶内容</div>
</div>
</div>
<div class="flexWrap" :class="is_fixed? 'wrapTop' : 'flex'">
<div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="50">
<div class="flexContent">
<div class="top" ref="top">
<div class="banner"><img src="../../../assets/images/文件名/banner.jpg" alt="" srcset=""></div>
<div class="topBar" id="fixedTop" ref="topBar" v-show="!is_fixed">
<div class="item" v-for="(item,index) in barList" @click="tab(index,item)">
不吸顶时展示的内容
</div>
</div>
</div>
<div class="scrollContent" id="wrap-content" ref="contentH">
<div class="memberList" v-show="infoList.length>0" id="content">
<div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div class="memberItem" v-for="(item,index) in infoList">
加载内容
</div>
<div class="loading" v-if="loading">
<span id="load-text">{{loadText}}</span>
</div>
</div>
</div>
<div class="empty" v-show="noData">最新达成情况正在更新中...请稍后再来～</div>
</div>
</div>
</div>
</div>
<div class="footer">底部固定</div>
</div>
js:
data: {
return {
busy: false,
pageNum: 1,
pageSize: 10,
loading: false，
noData: false,
infoList: []
}
}
mounted() {
<!--监听滚动-->
that.$nextTick(() =>{
let scrollDOM = document.querySelector('.flexContent')
scrollDOM.addEventListener('scroll',that.handleScroll)
})
},
methods: {
handleScroll () {
let scrollDOM = document.querySelector('.flexContent')
let scrollTop = scrollDOM.scrollTop
<!--计算滚动高度-->
let clientHeight = document.documentElement.clientHeight
if (scrollTop >document.querySelector('.banner').offsetHeight) {
this.is_fixed = true
} else {
this.is_fixed = false
}
},
<!--//触发加载-->
loadMore() {
if(this.pageNum<this.pages) {
this.loading = true
this.pageNum+=1
this.busy = true
this.loadData(接口参数,this.pageNum)
}
},
//加载时触发的接口调用
loadData() {
api.XXX({},function(success,data,err){
if(success) {
if(data.status==200) {
//加载逻辑判断
if(data.body.list.length>0 &&pageNum>0){
that.infoList = that.infoList.concat(data.body.list)
that.loading = false
}
if(pageNum==data.body.pages || data.body.list<20) {
that.loading = true
that.loadText = '没有更多数据了'
}
if(pageNum==1 &&data.body.list.length==0) {
that.noData = true
that.infoList = []
}
}
}
})
}
}
css:
.isFixed {
width: 100%
height: 1rem
position: absolute
top: 0
left: 0
z-index: 100
}
.myScroll {
height: 100%
}
.wrap {
width: 7.5rem
margin: auto
height: 100%
overflow: hidden
display: flex
flex-direction: column
}
.flex {
flex: 1
}
.wrapTop {
padding-top:0.45rem
}
.flexWrap {
width: 100%
height: 100%
}
.flexContent {
width: 100%
height: 100%
display: flex
flex-direction: column
overflow: scroll
-webkit-overflow-scrolling: touch
}
.top {
.banner {
position: relative
img {
width: 100%
display: block
}
.month {
position: absolute
bottom: 0.33rem
left: 0.45rem
color: #fff
font-size: 0.45rem
}
}
}
.scrollContent {
width: 100%
background: #fff
flex: 1
-webkit-overflow-scrolling: touch
.memberList {
height: 100%
padding-top: 0.2rem
}
}
.footer {
position: fixed
bottom: 0
width:7.5rem
margin: auto
height:auto
background:rgba(0,0,0,.7)
}
