js吸顶效果与布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js吸顶效果与布局相关的知识,希望对你有一定的参考价值。
参考技术A 项目中常用的吸顶效果,如果页面没有固定定位的元素是比较容易实现的,但是如果页面结构比较复杂会有兼容性问题常见兼容性问题:吸顶元素无法固定,会随着页面滚动抖动
解决方案:页面整体为弹性布局,中间加载部分自适应高度,总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果,必须将定位元素放到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);
以上是关于js吸顶效果与布局的主要内容,如果未能解决你的问题,请参考以下文章