@韩永豪 贝聊科技 移动开发部 前端 菜鸟工程师前端
本文讨论的粘性导航是指,常规状态下为静态定位,且因页面滚动而超出屏幕显示范围时,仍然固定在屏幕某个地方的元素。效果以下:web
对应的HTML结构以下:浏览器
<header id="banner" class="header">banner</header>
<div class="wrap">
<nav id="nav" class="nav">------ 粘性方块 ------</nav>
</div>
<ul id="list" class="list">
......
</ul>复制代码
导航栏的常规状态是静态定位,所以,要实现粘性效果,就须要监测导航栏是否超出屏幕显示范围。利用JS添加滚动事件监听,当导航栏开始滚出屏幕显示范围时设置CSS样式「position: fixed」,让它固定在页面顶部,反之,恢复为常规状态。关键代码以下:bash
.wrap {
height: 1rem;
}
.nav {
height: 1rem;
line-height: 1rem;
background: #67CAEF;
text-align: center;
color: white;
}
.nav.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}复制代码
var $nav = document.querySelector('#nav');
var $list = document.querySelector('#list');
var offsetTop = $nav.offsetTop; // 粘性方块与页面顶部的距离
window.addEventListener('scroll', function() {
var scrollTop = this.scrollY || this.scrollTop;
if (scrollTop > offsetTop) {
$nav.classList.add('fixed');
} else {
$nav.classList.remove('fixed');
}
});复制代码
因为fixed定位会使导航栏脱离文档流,所以导航栏外面要包一层固定高度的元素(div.wrap),占据导航栏的高度。dom
这种实现方案在PC和安卓平台下均表现正常,而在iOS的UIWebView中却出现了奇怪的现象:当页面滚动时,粘性导航并无切换到fixed定位,而是保留static定位,直到滚动结束后,才会切换到fixed定位。这是由于,在UIWebView中,滚动结束后才会触发滚动事件,而WKWebView就没有这个问题。异步
sticky定位是一种比较新的定位方式。初始状态下,此类定位元素的表现与「position: relative」类似,但不受定位(top、left等)影响。当页面滚动至元素的「offsetTop - top」或「offsetLeft - left」时,元素就会切换成「position: fixed」的效果。可是「position: fixed」的效果是有范围限制的,它只在sticky定位元素的父元素范围内有效。ui
使用方法也很简单,只须要设置CSS样式「position: sticky」便可。关键代码以下:this
.sticky {
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
z-index: 999;
}复制代码
做为一种比较新的定位方式,sticky定位在低版本的浏览器中没法兼容,它的兼容状况以下:
spa
由图可见:code
那如何判断浏览器是否支持sticky呢?很遗憾,目前没有很完善的检测方式,且Android下的浏览器比较多,因此只能粗略地认为只有iOS ≥ 6.1才能支持sticky。而iOS的UIWebView中,sticky定位明显比fixed定位效果更好。
在粘性导航上新增两个按钮,点击不一样按钮,异步加载不一样的列表内容。效果图以下:
关键代码以下:
var $tabs = document.querySelector('#tabs');
var $list = document.querySelector('#list');
var $tabItem = $tabs.querySelectorAll('.item'); // 点击加载列表的按钮
// 动态加载列表
function loadList(type) {
var template = '';
var len = (Math.random() * 45) + 5; // 随机生成 5 ~ 49 条数据
for (var i = 0; i < len; i++) {
template += '<li class="item">' +
'<img src="../common/icon.png" alt="图标" />' +
'<div class="title">' + type + '(' + (i + 1) + ')</div>' +
'<div class="text">这是一段内容</div>' +
'</li>'
}
$list.innerHTML = template;
}
// 绑定标签页点击事件
for (var i = 0; i < $tabItem.length; i++) {
var item = $tabItem[i];
(function(i) {
item.onclick = function() {
$list.innerHTML = '加载中...';
// 模拟异步加载
setTimeout(function() {
loadList(i);
}, 500);
};
})(i);
};
loadList(0); // 加载列表数据复制代码
当标签页切换,异步更新列表数据时,因为列表有短暂的时间是处于内容加载中的状态,没法维持原来的高度,因此会跳到页面的顶部。
要解决这种很差的体验,只须要在点击加载数据的时候,设置列表的最小高度为屏幕高度的一倍便可。关键代码以下:
$list.style.minHeight = window.screen.height + 'px';复制代码