文档章节

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

Fiona大公举
 Fiona大公举
发布于 2016/11/29 12:13
字数 1242
阅读 120
收藏 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 扩展,主要提供一整套布局...

王练
06/22
0
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 扩展,主要提......

王练
05/24
0
0
LayoutManager 定制化布局方案 - vlayout

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

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

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

王练
05/19
0
0
【备忘】2017小凡老师泰牛Web基础班项目实战玩完整版-美团网项目

2017小凡老师泰牛Web基础班项目实战玩完整版-美团网项目 1.对于前端开发人员来说,最核心的技能是什么? 2.前端基础,学的怎么样,能否独立开发一些项目? 3.对css和js掌握的怎么样?了解、熟...

qq_38155396
2017/06/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
14
2
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部