滚动定位在移动端的研究
什么是滚动定位,我认为是指滚动行为触发的某些定位展现就是滚动定们,比如觉见的一些nav
,在默认的时候是显示在页面某个区域,而当滚动到这个区域的时候该元素会"吸附"在浏览器上。
这种技术大量的应用于我们身边,比如jd的商品介绍页里的内容导航,点击查看
实现的思路
一般为判断页面目标元素距离顶部的距离(offset+top
),绑定滚动事件,当滚动条距离顶部距离(scroll_top
)大于等于(offset_top
)时让目标元素处于fixed
定位即可实现。代码如:
var $elem = $('.test').eq(0); var offset_top = $elem.offset().top; var $window = $(window); $window.on('scroll resize', function(){ if($window.scrollTop() >= offset_top){ $elem.addClass('fixed'); } else { $elem.removeClass('fixed'); } }).trigger('scroll');
需要注意的是,你得明白你这个滚动定位目标元素是否会存在滚动超出底边问题,比如上面jd的页面,当目标导航滚动超出内容的区域,则滚动定位导致消失。比如 这个页面 当你把浏览器窗口调"低"时滚动页面到底部,你会发现滚动定位的元素"跑偏"了,这就是超出底边了,当然你会不会问谁这么奇葩的去这么"玩"啊,但我想说的是既然做这个就尽量做好~
移动端的问题
就上面的demo在移动端的体验不佳额,因为移动端有个滚动的缓冲,如:
本来我想做个scrollEvent
的hack
,就是在手指触摸屏幕开始就setInterval
下这个回调,以来模拟scroll
,但就demo的情况看是没有行通,发现只要在手指触摸屏幕开始到手指离开屏幕的期间居然不触发scroll
,就连setInterval
也会暂停,看来行不通了。
解决移动端的体验问题
就在刚刚无意期间浏览了jd的一个商品页,发现他的滚动定位元素在移动端体验相当完美,于是我就研究下吧,看他的源码里有:
... this.isUseSticky = this.supportSticky(); ... ItemDet.prototype.supportSticky = function () { var t; var n = '-webkit-sticky'; var e = document.createElement('i'); e.style.position = n; t = e.style.position; e = null; return t === n; }; ... if (!this.isUseSticky) { this.detTabH = $('#detailBaseLine').offset().top; if (st > this.detTabH) { if (!this.detTabFloatShow) { $('#detailTab').addClass('mod_tab_fixed'); } this.detTabFloatShow = true; } else { if (this.detTabFloatShow) { $('#detailTab').removeClass('mod_tab_fixed'); } this.detTabFloatShow = false; } } ...
看代码意思是判断是否兼容sticky
,然后这是什么鬼?于是查手册,有个惊奇的发现:
sticky: 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)
然后移动端也可以使用jd的思路,如果支持css3的sticky
则使用她,否则用js兼容。
注:上面demo里测试1
是用js实现的,测试2
是用css3实现的,体验差太多了
建议继续学习:
- iOS的定位原理揭秘 (阅读:4640)
- 在python中获取当前位置所在的行号和函数名 (阅读:3844)
- div+css+js无缝滚动代码 (阅读:2907)
- 小tip: 纯CSS实现视差滚动效果 (阅读:2497)
- 常见定位技术有哪些? (阅读:2470)
- IE6 bug: 消失的绝对定位元素 (阅读:1963)
- 定位相关的怪异问题 (阅读:1750)
- 产品线定位 (阅读:1705)
- 全兼容的滚动js脚本 (阅读:1691)
- 定位相关的怪异问题 (阅读:1628)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:前端小武 来源: 前端小武
- 标签: 定位 滚动
- 发布时间:2016-03-23 15:39:08
- [70] Go Reflect 性能
- [68] 如何拿下简短的域名
- [65] Oracle MTS模式下 进程地址与会话信
- [63] 图书馆的世界纪录
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [54] 视觉调整-设计师 vs. 逻辑
- [49] 界面设计速成
- [48] 读书笔记-壹百度:百度十年千倍的29条法则