mui获取滚动高度滚动到某高度时div固定到顶部,因为在设计app首页时候需要一个动画效果,手机往下滑动的时候 banner隐藏,功能区域固定在顶部。 往上滑动的时候则回复原来的效果
预览效果
1212
1.前提说明
在做这个效果的时候 大家第一时间一定会想到用mui 的scroll(区域滚动)来写 先给它加上一个id
<div id="ulsit" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
随后在用获取滑动的高度
var scroll = mui('#ulsit').scroll();
document.querySelector('#ulsit').addEventListener('scroll', function(e) {
console.log(scroll.y);
})
这个是妥妥的可以,但是因为组建里面的元素导致了position: fixed;属性失效所以最好不要用自带的组件
2.原生js获取高度
原型代码如下
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-content">
<!-- 顶部banner -->
<div class="top-div">
<div class="top-groung"></div>
</div>
<!-- 三个圆 -->
<div class="top-y">
<div class="top-flex"></div>
<div class="top-flex"></div>
<div class="top-flex"></div>
</div>
<!-- 列表 -->
<div class="bot-div">
<!-- 列表标题 -->
<div class="bot-h-div">
<div class="bot-h-l"></div>
<div class="bot-h-l"></div>
</div>
<div class="lun-top">
<div class="bot-ul">1</div>
<div class="bot-ul">2</div>
<div class="bot-ul">3</div>
<div class="bot-ul">4</div>
<div class="bot-ul">5</div>
<div class="bot-ul">6</div>
<div class="bot-ul">7</div>
<div class="bot-ul">8</div>
</div>
</div>
</div>
</body>
样式如下
.top-div{
height: 200px;
background-color: #d4d4d4;
overflow: hidden;
}
.top-groung{
height: 160px;
margin: 20px;
border-radius: 10px;
background-color: #a9a9a9;
}
.top-y{
display: flex;
justify-content: space-between;
align-items: center;
padding:20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #d4d4d4;
}
.top-flex{
height: 60px;
width: 60px;
border-radius: 50%;
background-color: #a9a9a9;
}
.bot-div{
padding: 20px;
}
.bot-h-div{
display: flex;
justify-content: space-between;
align-items: center;
}
.bot-h-l{
height: 25px;
width: 100px;
background-color: #a9a9a9;
border-radius: 4px;
}
.bot-ul{
background-color: #a9a9a9;
border-radius: 10px;
height: 130px;
margin-top: 20px;
}
原生js获取滑动高度
<script type="text/javascript" charset="utf-8">
mui.init();
window.addEventListener('scroll', function () {
var top = document.documentElement.scrollTop || document.body.scrollTop
console.log(top)
})
</script>
3.div固定顶部
看原型我们知道需滑动要把三个圆 和列表标题固定在顶部,以及下滑恢复,这里我们是多加了一个固定列表的上边距,因为滑动隐藏banner的时候,列表第一个会跑到上面,得添加上边距显示
<script type="text/javascript" charset="utf-8"> mui.init(); window.addEventListener('scroll', function () { var top = document.documentElement.scrollTop || document.body.scrollTop console.log(top) if (top > 180) { // 固定三个圆 document.getElementsByClassName('top-y')[0].style = 'position:fixed; top: 43px; left: 0; z-index: 100;width:100%;' // 固定列表标题 document.getElementsByClassName('bot-h-div')[0].style = 'position:fixed; top: 140px; left: 0; z-index: 100;background-color:#efeff4;width:100%;padding:15px 15px;box-shadow: #8a8487 5px 5px 5px;' // 添加列表上边距 document.getElementsByClassName('lun-top')[0].style = 'margin-top:160px' } else{ // 上滑清楚固定效果 document.getElementsByClassName('top-y')[0].style = 'position:static' document.getElementsByClassName('bot-h-div')[0].style = 'position:static' document.getElementsByClassName('lun-top')[0].style = 'margin-top:0px' } }) </script>
评论列表(2条)
收藏《mui获取滚动高度滚动到某高度时div固定到顶部》文章
点赞《mui获取滚动高度滚动到某高度时div固定到顶部》文章