文档章节

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

Fiona大公举
 Fiona大公举
发布于 2016/11/29 12:13
字数 1242
阅读 138
收藏 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
私信 提问
vlayout 1.2.16 发布,LayoutManager 定制化布局

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

王练
2018/06/22
569
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
841
1
LayoutManager 定制化布局方案 - vlayout

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

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

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

王练
2018/03/01
1K
0
vlayout 1.2.14 发布,阿里 LayoutManager 定制化布局

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

王练
2018/05/19
939
2

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
今天
2
0
OSChina 周四乱弹 —— 我家猫真会后空翻

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听这个# 我艇牛逼,百听不厌,太好听辣 分享 Led Zeppelin 的歌曲《Stairway To Heaven》 《Stairway To Heaven》- Led Z...

小小编辑
今天
3
0
node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部