文档章节

关于活动导航栏滚动吸顶的可行性优化方案

Fiona大公举
 Fiona大公举
发布于 2016/11/29 12:13
字数 1242
阅读 167
收藏 0

吸顶效果,就是在页面滚动过程中,某个区域(一般来说就是一个 tab 头或者页面中的一个二级导航栏)在即将消失在窗口(viewport)时固定在窗口的顶部。

   其实这个效果的原理就是在页面滚动中,获取页面的滚动事件,然后在元素滚动到指定的位置的时候改变元素的position。想要实现这个效果,一般来说都会采取对页面的scroll事件进行监听,然后改变position为fixed。

这样的效果,在PC上面不管是chrome,Safari又或者是Firefox的效果都很平滑。在移动端,安卓手机中的效果依然很棒,但是到了IOS中,效果体验却非常的差。

 原因是因为,在IOS系统中,页面上的scroll事件只会触发一次,而且是会在页面滚动完全停止时才会触发,而且页面在滚动时,会暂停所有DOM操作。比如setTimeout和setInterval也是被停止的。我们可以测试一下。

在IOS上面的测试可以清楚的看到在滚动的时候,停止了一切的JSDOM活动。但是在安卓上面测试,发现滚动的时候setInterval并没有被停止。所以说,IOS上面的滚动体验是在有点差,不过低版本的安卓也是一样的禁止事件的,可惜现在已经基本上很难找到2.3X以下的版本了。

  so,在IOS下需要寻求解决办法。既然scroll不行,就另辟蹊径,我们可以用touchmove事件来代替scroll事件。监听touchmove事件来获取当前的偏移量,想法是是好的,但是面临一个新的问题,惯性滚动,也就是说在手指离开屏幕之后,页面还是会由于模拟惯性从而继续滚动一段距离,然后慢慢的停止。这里如果用JS去模拟惯性滚动的话将会非常麻烦,需要的开发成本都已经大于这个导航的本身了。

  所以就必须要找到另外的解决办法。所幸,CSS3的position中有一个使用的非常不广泛的属性---sticky。

sticky目前还是一个试验的属性,它的作用相当于relative和fixed的结合体,这两个属性之间发生了什么我也不太清楚。反正就诞生了sticky这个属性。它呢,当作用的元素在可视区域内时,元素的定位就是relative,当元素不在可是区域内时,它的定位就是fixed,是不是很神奇,不过它的支持度很不好,我们可以从caniuse上面就能看出来。

.sticky {
   position: -moz-sticky;
   position: -ms-sticky;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.fixed {
   position: fixed;
   top: 0;
 }

所以说对于IOS6.0以上的版本我们用sticky完全可以实现我们想要的效果而不需要担心兼容性和流畅度。
   所以,最终我们有一个兼容性的办法:
   在安卓或者PC chrome等浏览器我们就采用JS监听scroll的方法去改变元素的position,在IOS上我们就采用sticky的方法。具体代码实现,就不贴啦。

1.设置了postion:sticky的元素要生效必须要至少设置top,bottom,left,right中的一个,而且top和bottom同时设置时,top生效的优先级高,left和right同时设置时,left生效的优先级高;
   2.sticky元素生效与否有两个临界条件
   以top:10px为例,当页面滚动到sticky在文档流中位置元素离viewport顶端的距离<=10px时,sticky元素就开始固定了,当sticky元素在文档流中位置离viewport顶端的距离>10px时,元素就不再固定。
   3.另一个是该元素的父容器的边缘,在例子里面我们可以看到当sticky元素碰到父容器的底部时,就会跟随父元素一起滚动了。 所以如果你单纯给sticky元素加一个父容器,但是却不能使父容器的高度大于sticky元素的高度,这样并不会看到元素固定的效果的,因为一开始sticky元素就到达了父元素的边缘,它会跟着父元素滚动。
   4.如果sticky元素任何父元素的overflow属性不是默认的visible,那么sticky的作用也会失效,比如设置父元素的overflow:hidden的父容器,父容器根本就不能滚动,所以sticky元素也不会有滚动然后固定的情况。
   5.综上所述,sticky作用的条件还是蛮苛刻的,只能父元素之内生效,如果需要全屏幕都能fix住,也只有直接把body作为父元素了。

参考案例:http://h5.dianping.com/app/app-new-wed-h-5/scoll.html

© 著作权归作者所有

Fiona大公举
粉丝 0
博文 1
码字总数 1242
作品 0
私信 提问
讲讲吸顶效果与react-sticky

前言 之前项目里的头部导航需要实现吸顶效果,一开始是自己实现,发现效果总是差那么一点,当时急着实现功能找来了react-sticky这个库,现在有空便想着彻底琢磨透这个吸顶的问题。 1. 粘性定...

songjp
05/13
0
0
vlayout 1.2.16 发布,LayoutManager 定制化布局

vlayout 1.2.16 已发布,更新内容: Add interface to control can scroll feature vlayout(VirtualLayout)是阿里开源的一个针对 RecyclerView 的 LayoutManager 扩展,主要提供一整套布局...

王练
2018/06/22
711
0
vlayout 1.2.15 发布,LayoutManager 定制化布局

vlayout 1.2.15 已发布,更新内容: Add for methods; com.alibaba.android:vlayout:1.2.15@aar vlayout(VirtualLayout)是阿里开源的一个针对 RecyclerView 的 LayoutManager 扩展,主要提......

王练
2018/05/24
923
1
LayoutManager 定制化布局方案 - vlayout

VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。 设计思路 通过定制化的LayoutManager,接管整个RecyclerView的布局逻辑;Lay...

匿名
2017/11/27
3.6K
0
vlayout 1.2.11 发布,阿里 LayoutManager 定制化布局

vlayout(VirtualLayout)是阿里开源的一个针对 RecyclerView 的 LayoutManager 扩展,主要提供一整套布局方案和布局间的组件复用的问题。 vlayout 1.2.11 已发布,该版本修复了以下问题: ...

王练
2018/03/01
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部