原文来自：https://www.frbkw.com/2126/
因为在设计app首页时候需要一个动画效果，手机往下滑动的时候 banner隐藏，功能区域固定在顶部。 往上滑动的时候则回复原来的效果
基础MUI项目（吾爱好像找不到上传视频的就截图了）
1.前提说明在做这个效果的时候 大家第一时间一定会想到用mui 的scroll(区域滚动)来写 先给它加上一个id[Asm] 纯文本查看 复制代码 <div id="ulsit" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div> [Asm] 纯文本查看 复制代码 var scroll = mui('#ulsit').scroll();
document.querySelector('#ulsit').addEventListener('scroll', function(e) {
console.log(scroll.y);
})
原型代码如下
[Asm] 纯文本查看 复制代码 <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>
样式如下
[Asm] 纯文本查看 复制代码 .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获取滑动高度
[Asm] 纯文本查看 复制代码 <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的时候，列表第一个会跑到上面，得添加上边距显示
[Asm] 纯文本查看 复制代码 <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>
源码下载
链接: https://pan.baidu.com/s/1mIgjJazGPkHknixReOBWAg 提取码: df5a 复制这段内容后打开百度网盘手机App，操作更方便哦 | 
发表于 2019-12-16 10:04
