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

2024-08-25 09:18
文章标签 实现 布局 position 粘性 ios6 sticky

本文主要是介绍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。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
C++——stack、queue的实现及deque的介绍

C++——stack、queue的实现及deque的介绍

目录 1.stack与queue的实现 1.1stack的实现  1.2 queue的实现 2.重温vector、list、stack、queue的介绍 2.1 STL标准库中stack和queue的底层结构  3.deque的简单介绍 3.1为什么选择deque作为stack和queue的底层默认容器  3.2 STL中对stack与queue的模拟实现 ①stack模拟实现
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2