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

2024-08-25 09:18

本文主要是介绍position:sticky实现iOS6+下的粘性布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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

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

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的浏览器这样的特性,导致元素要在滚动停止后才被设置为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的元素,特征如下:

  • 元素不会脱离文档流,并保留元素在文档流中占位的大小
  • 元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置
  • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量

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

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

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

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.fixed {
    position: fixed;
    top: 0;
}
// 检测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去实现,检测代码如下:

// 判断是否支持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属性:

  • Firefox 26+: 需要在 about:config 中把 layout.css.sticky.enabled 设置为“true”,FireFox 32+ 直接支持。FireFox只支持不带前缀的sticky属性(如:position:sticky)
  • Safari 6.1+: 支持使用-webkit前缀的sticky属性(如:position: -webkit-sticky)
  • Chrome 23~36: 需要在 chrome://flags 将 启用实验性网络平台功能 启用;Chrome 37+ 不支持该属性,chrome团队暂时将它移除,具体见 Issue (需要梯子)
  • IE: 不支持。

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

ordemo

position:sticky的生效条件

首先,设置了postion:sticky的元素要生效必须要至少设置 top , bottom , left , right 中的一个,而且 top 和 bottom 同时设置时, top 生效的优先级高,left 和 right 同时设置时, 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的 bottom 和 right 值设了怎么不能生效呢,那是因为你的元素所处的位置还没满足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了,什么时候回到文档流中位置了,如果我们希望在元素置顶时改变元素的样式或者置顶的过程加上一些炫酷的动画,这就无能为力了。

http://efe.baidu.com/blog/position-sticky/

这篇关于position:sticky实现iOS6+下的粘性布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1105153

相关文章

Linux下修改hostname的三种实现方式

《Linux下修改hostname的三种实现方式》:本文主要介绍Linux下修改hostname的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下修改ho编程stname三种方式方法1:修改配置文件方法2:hFvEWEostnamectl命

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

Python Excel实现自动添加编号

《PythonExcel实现自动添加编号》这篇文章主要为大家详细介绍了如何使用Python在Excel中实现自动添加编号效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、背景介绍2、库的安装3、核心代码4、完整代码1、背景介绍简单的说,就是在Excel中有一列h=会有重复

MySQL的隐式锁(Implicit Lock)原理实现

《MySQL的隐式锁(ImplicitLock)原理实现》MySQL的InnoDB存储引擎中隐式锁是一种自动管理的锁,用于保证事务在行级别操作时的数据一致性和安全性,本文主要介绍了MySQL的隐式锁... 目录1. 背景:什么是隐式锁?2. 隐式锁的工作原理3. 隐式锁的类型4. 隐式锁的实现与源代码分析4

如何通过Golang的container/list实现LRU缓存算法

《如何通过Golang的container/list实现LRU缓存算法》文章介绍了Go语言中container/list包实现的双向链表,并探讨了如何使用链表实现LRU缓存,LRU缓存通过维护一个双向... 目录力扣:146. LRU 缓存主要结构 List 和 Element常用方法1. 初始化链表2.

MySQL中Next-Key Lock底层原理实现

《MySQL中Next-KeyLock底层原理实现》Next-KeyLock是MySQLInnoDB存储引擎中的一种锁机制,结合记录锁和间隙锁,用于高效并发控制并避免幻读,本文主要介绍了MySQL中... 目录一、Next-Key Lock 的定义与作用二、底层原理三、源代码解析四、总结Next-Key L

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架(Arrays.asList)1.1 示例代码1.