滚动浮动导航，iscroll结构滚动固定元素
程序员文章站
2022-07-13 15:59:06
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no,email=no" />
<title>会员详情</title>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
.user-tab-hd{ padding: 9px 0; text-align: center; background: #fbfbfb; width: 100%; margin: 0;}
.user-tab-hd li{float: left; width: 50%;}
.user-tab-hd li span{height: 27px; line-height: 27px; width: 103px; text-align: center; border: 1px solid transparent; color: #8b8c8e; border-radius: 27px;}
.user-tab-hd li.active span{ color: #ff844e; border-color: #e4e4e4;background: #fff;}
.fixed{position:fixed; top:44px; left:0; z-index:8;}
.hidden{ display: none !important;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">test</h1>
</header>
<ul class="user-tab-hd fixed hidden" id="fixedNav">
<li class="active"><span>导航1</span></li>
<li><span>导航2</span></li>
</ul>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div style="height: 200px; background: #0B0C0E;"></div>
<ul class="user-tab-hd mui-clearfix" id="userTab">
<li class="active" data-li="1"><span>导航1</span></li>
<li data-li="2"><span>导航2</span></li>
</ul>
<div style="height: 400px; background: #0062CC;"></div>
<div style="height: 400px; background: #25B716;"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
deceleration: 0.0006,
up: {
contentrefresh : "正在加载...",
contentnomore: '已加载完全部',
callback: loadPage
}
}
});
function loadPage(){
}
mui.plusReady(function() {
});
// 滚动固定
var himall={
removeClass:function(el,name) {
if(!el)
return;
if(el.className.indexOf(name)>=0)
el.className=el.className.replace(name,'');
},
hasClass:function(el,name) {
return (el.className.indexOf(name)>=0);
}
};
var headH = document.querySelector('header').offsetHeight,
tab = document.getElementById('userTab'),
fixed = document.getElementById('fixedNav');
window.addEventListener('scroll', function(e) {
if(himall.hasClass(fixed, 'hidden')) {
if(tab.getBoundingClientRect().top <= headH) {
himall.removeClass(fixed, ' hidden');
}
} else if(!himall.hasClass(fixed, 'hidden')){
if(tab.getBoundingClientRect().top >= headH){
fixed.className += ' hidden';
}
}
});
</script>
</body>
</html>测试后发现多了一个导航，没能隐藏掉的原因，然后把mui.plusReady(function() {
});加上就可以了。
下一篇： Andrid 永久隐藏导航栏与系统栏