关于position:sticky的使用
前段时间做的一个项目中有要求导航随页面滚动然后固定在窗口的某个位置（下面简称粘性布局），所以本文主要介绍 position:sticky 实现的粘性布局；链接在此；
为了实现这种粘性布局我们一般都是通过js监听window的scroll事件，当需要固定的元素滚动到窗口顶部时，把元素的position属性设置为fixed，否则，取消fixed，简单的js代码如下：
1 2 3 4 5 6 7 8 | $(window).scroll(function () { var top = $(window).scrollTop(); if (top >= nav_top) { $(".nav_box").addClass('nav_box_top'); }else{ $(".nav_box").removeClass('nav_box_top'); } }); |
上面这种方法在chrome模拟手机浏览器的表现很好，但是在移动端浏览器上粘顶的效果就没有那么平滑，尤其是在ios设备上，ios下的浏览器会在页面滚动的时候，暂停所有js的执行，直到滚动停止才会继续去执行js（注意暂停了所有js的执行，所以考虑用setTimeout或setInterval也是没有用的）。所以页面滚动时，scroll事件在iOS的浏览器下并不会持续被触发，而是在页面滚动停止后，才会去触发一次scroll事件。
使用position:sticky
position:sticky的表现上像是position:fixed和position:relative的结合体，设置了position:sticky的元素，特征如下：
1、元素不会脱离文档流，并保留元素在文档流中占位的大小
2、元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置
3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，
那么是相对于viewport来计算元素的偏移量
为了让大部分ios用户体验到导航固定在顶端的平滑感觉，所以我们用上position:sticky：
1 2 3 4 5 6 7 8 | .ios_fix{ position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: sticky; top:0; z-index: 100;} |
对于iOS6+我们毫不犹豫的使用position:sticky属性，其实直接判断浏览器是否支持该属性，
而不仅限于iOS，所以我们还可以去检测浏览器是否支持sticky属性，从而决定是使用js监听事件去
实现还是通过原生CSS去实现，检测代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 | var isSupportSticky = function() { for (var t = ["", "-webkit-", "-ms-", "-moz-", "-o-"], e = "", n = 0; n < t.length; n++) e += "position:" + t[n] + "sticky;"; var i = document.createElement("div"), a = document.body; i.style.cssText = "display:none;" + e, a.appendChild(i); var r = /sticky/i.test(window.getComputedStyle(i).position); return a.removeChild(i), i = null, r} |
手机阅读请扫描下方二维码：
position:sticky相对于viewport去定位，当scrollTop大于viewport时，在ios上打开使用sticky的导航条，click事件会失效，Android正常。。。我只能做一个隐藏的导航条，用来透传点击事件，不知道有没更好的方法。
1
555
1
555
1
555
1
1
1
1
1
1
1
1
1
555
555
555
555
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
555
1
555
1
1
1
1
1
1
1
555
1
1
555
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1