@韩永豪 贝聊科技 移动开发部 前端 菜鸟工程师
什么是粘性导航
本文讨论的粘性导航是指,常规状态下为静态定位,且因页面滚动而超出屏幕显示范围时,仍然固定在屏幕某个地方的元素。效果如下:
对应的HTML结构如下:
<header id="banner" class="header">banner</header>
<div class="wrap">
<nav id="nav" class="nav">------ 粘性方块 ------</nav>
</div>
<ul id="list" class="list">
......
</ul>复制代码
实现粘性的方式
fixed定位
导航栏的常规状态是静态定位,因此,要实现粘性效果,就需要监测导航栏是否超出屏幕显示范围。利用JS添加滚动事件监听,当导航栏开始滚出屏幕显示范围时设置CSS样式「position: fixed」,让它固定在页面顶部,反之,恢复为常规状态。关键代码如下:
.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),占据导航栏的高度。
这种实现方案在PC和安卓平台下均表现正常,而在iOS的UIWebView中却出现了奇怪的现象:当页面滚动时,粘性导航并没有切换到fixed定位,而是保留static定位,直到滚动结束后,才会切换到fixed定位。这是因为,在UIWebView中,滚动结束后才会触发滚动事件,而WKWebView就没有这个问题。
sticky定位
sticky定位是一种比较新的定位方式。初始状态下,此类定位元素的表现与「position: relative」相似,但不受定位(top、left等)影响。当页面滚动至元素的「offsetTop - top」或「offsetLeft - left」时,元素就会切换成「position: fixed」的效果。但是「position: fixed」的效果是有范围限制的,它只在sticky定位元素的父元素范围内有效。
使用方法也很简单,只需要设置CSS样式「position: sticky」即可。关键代码如下:
.sticky {
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
z-index: 999;
}复制代码
作为一种比较新的定位方式,sticky定位在低版本的浏览器中无法兼容,它的兼容情况如下:
由图可见:
- iOS需要6.1版本以上才能支持sticky定位。
- Android 4.x都不支持sticky定位。
那如何判断浏览器是否支持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';复制代码