mui获取滚动高度滚动到某高度时div固定到顶部

mui获取滚动高度滚动到某高度时div固定到顶部,因为在设计app首页时候需要一个动画效果,手机往下滑动的时候 banner隐藏,功能区域固定在顶部。 往上滑动的时候则回复原来的效果

mui获取滚动高度滚动到某高度时div固定到顶部 枫瑞博客

 

预览效果

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;属性失效所以最好不要用自带的组件

其他文章:uni-app 自定义导航菜单结合轮播滑动变色

 

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>

 

相关源码请关注微信公众号“枫瑞博客网” 回复“mui滑动固定头部”进行下载

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » mui获取滚动高度滚动到某高度时div固定到顶部

2 评论

  1. 收藏《mui获取滚动高度滚动到某高度时div固定到顶部》文章

发表评论