position:sticky实现iOS6+下的粘性布局

用户总是希望在窗口明显的地方方便找到自己想要的操作项,例如停留在浏览器窗口顶端的菜单栏,筛选栏等。所以我们会把用户最常用到或者我们希望用户注意到的内容一直展现在窗口的可视区域,让用户能够一眼就看到。这当中常需要用到一种页面滚动然后元素固定在窗口的某个位置的布局方式(下面简称粘性布局)。

要实现这种粘性布局,我们常常都是通过js来模拟,实现方案是通过js监听window的scroll事件,当需要固定的元素滚动到窗口顶部时,把元素的position属性设置为fixed,否则,取消fixed,简单的js代码如下:

1
2
3
4
5
6
var nav = document.querySelector('.nav');
var navOffsetY = nav.offsetTop;
function onScroll(e) {
window.scrollY >= navOffsetY ? nav.classList.add('fixed') : nav.classList.remove('fixed');
}
window.addEventListener('scroll', onScroll);

上面的实现在桌面浏览器的表现还是挺好的,但是在移动端浏览器上粘顶的效果就显得不那么平滑了。

特别是在iOS设备上,iOS下的浏览器会在页面滚动的时候,暂停所有js的执行,直到滚动停止才会继续去执行js(注意暂停了所有js的执行,所以考虑用setTimeoutsetInterval也是没有用的)。所以页面滚动时,scroll事件在iOS的浏览器下并不会持续被触发,而是在页面滚动停止后,才会去触发一次scroll事件。 在Android 2.3及以下的版本的浏览器scroll事件的响应也是跟iOS一样。而Android 2.3以上的版本中虽然有部分浏览器能持续的触发scroll事件,但由于移动设备上惯性滚动的原因,scroll事件的回调函数执行渲染Dom频率还是赶不上滚动的频率,所以即使是在高版本的Android下,滚动快了,还是会看到原来fixed的元素闪跳归位。

下面我们来做一个scroll事件的测试:

1
2
3
4
5
var count = 0;
var num = document.querySelector('#num');
window.addEventListener('scroll', function () {
num.innerHTML = ++count;
});

下图分别是测试代码在iphone 5s(iOS 7.1.1)和红米 1S(Android 4.3)中的表现:

iOS 7.1.1 Android 4.3

正因为iOS的浏览器这样的特性,导致元素要在滚动停止后才被设置为fixed或取消fixed,特别是取消fixed的延迟,元素在页面滚动停止后突然跳回原来的位置,这体验实在是太差了!价值一个肾的水果机,体验可不能这么不流畅啊!总得想点办法优化一下。

尝试监听body的touchmove事件,但还是由于惯性滚动的原因,并不能解决闪跳的问题。iscroll有个试验版本iscroll-probe.js能实时响应touchmove模拟的滚动事件,可是对整页使用iscroll,还要做这么耗cpu性能的事情,想想都可怕。但我还是试验了一下,效果也并不好。

使用position:sticky

position:sticky是属于W3C Editor’s Draft中的一个属性,目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。大家可以从这里看到该属性的由来。

position:sticky的表现上像是position:fixed和position:relative的结合体,设置了position:sticky的元素,特征如下:

这个有趣的属性,在各个浏览器的兼容性如何呢?看看caniuse给出的position:sticky在各浏览器的兼容性:

上图中可看到,红了一片,大部分的浏览器并不支持该属性。可惜的是,Android下的自带浏览器居然全部都不支持该属性,还好在iOS的浏览器中,从iOS6+开始支持该CSS属性,这让我们感到一丝欣慰。

抱着能做好一点,就努力做好一点的态度,还是应该让大部分的iOS用户体验到平滑的感觉的,所以上面的实现粘性布局的代码可以这样改一下:

1
2
3
4
5
6
7
8
9
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.fixed {
position: fixed;
top: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 检测iOS版本大于等于6
function gtIOS6() {
var userAgent = window.navigator.userAgent;
var ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/);
return ios && ios[2] && (parseInt(ios[2].replace(/_/g, '.'), 10) >= 6);
}
var nav = document.querySelector('.nav');
if (gtIOS6()) {
// 大于等于iOS6版本使用sticky
nav.classList.add('sticky');
} else {
var navOffsetY = nav.offsetTop;
function onScroll(e) {
window.scrollY >= navOffsetY ? nav.classList.add('fixed') : nav.classList.remove('fixed');
}
window.addEventListener('scroll', onScroll);
}

如上,对于iOS6+我们毫不犹豫的使用position:sticky属性,其实直接判断浏览器是否支持该属性,而不仅限于iOS,因为上面caniuse中提到Firefox for Android也是支持改属性的,所以我们还可以去检测浏览器是否支持sticky属性,从而决定是使用js监听事件去实现还是通过原生CSS去实现,检测代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 判断是否支持sticky属性
function isSupportSticky() {
var prefixTestList = ['', '-webkit-', '-ms-', '-moz-', '-o-'];
var stickyText = '';
for (var i = 0; i < prefixTestList.length; i++ ) {
stickyText += 'position:' + prefixTestList[i] + 'sticky;';
}
// 创建一个dom来检查
var div = document.createElement('div');
var body = document.body;
div.style.cssText = 'display:none;' + stickyText;
body.appendChild(div);
var isSupport = /sticky/i.test(window.getComputedStyle(div).position);
body.removeChild(div);
div = null;
return isSupport;
}

在PC的浏览器测试sticky属性:

欢迎用手机扫码或者用支持sticky属性的浏览器查看上面的栗子

or demo

position:sticky的生效条件

首先,设置了postion:sticky的元素要生效必须要至少设置topbottomleftright中的一个,而且topbottom同时设置时,top生效的优先级高,leftright同时设置时,left生效的优先级高;其次,sticky元素生效与否有两个临界条件:

  1. 一个是元素自身在文档流中的位置

top:10px为例,当页面滚动到sticky在文档流中位置元素离viewport顶端的距离<=10px时,sticky元素就开始固定了,当sticky元素在文档流中位置离viewport顶端的距离>10px时,元素就不再固定。

  1. 另一个是该元素的父容器的边缘

这种情况还是要用例子来说明(请在FireFox或者Safari查看下面给出的例子):

See the Pen JdNqqR by john chen (@oddjohn) on CodePen.

从上面例子可以看到,当sticky元素碰到父容器的底部时,就会跟随父元素一起滚动了。 所以如果你单纯给sticky元素加一个父容器,但是却不能使父容器的高度大于sticky元素的高度,这样并不会看到元素固定的效果的,因为一开始sticky元素就到达了父元素的边缘,它会跟着父元素滚动。

另外,一旦离sticky元素最近的祖先元素的overflow属性不是默认的visible,那么sticky元素固定的位置将是相对于该祖先元素,所以当改变sticky元素的父容器的overflow默认值时,sticky元素的固定的位置就是相对于它父容器。如设置属性overflow:hidden的父容器,父容器根本就不能滚动,所以sticky元素也不会有滚动然后固定的情况。

还有些童鞋抱怨sticky的bottomright值设了怎么不能生效呢,那是因为你的元素所处的位置还没满足sticky生效的条件。再看下面的例子:

See the Pen OVgJZG by john chen (@oddjohn) on CodePen.

明显看出,只要sticky元素在文档流中的的位置超出了容器的可视区域,sticky就开始生效!

position:sticky与input

既然sticky拥有像fixed相似的功能,那么能否用它来替代fixed,从而解决iOS下的fixed + input的bug呢?很遗憾,经测试sticky + input在iOS下的表现跟fixed + input的bug差不多。至于怎么解决这个bug,请移步到Web移动端Fixed布局的解决方案

sticky+input的表现如下图:

使用CSS实现粘性布局的局限

由于是用CSS实现的粘性布局,所以并不能让我们知道元素在什么时候stuck了,什么时候回到文档流中位置了,如果我们希望在元素置顶时改变元素的样式或者置顶的过程加上一些炫酷的动画,这就无能为力了。

Polyfill

关于position:sticky的ployfill还是有挺多的,如下面这些:

相关文章

知识共享许可协议