技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 滚动定位在移动端的研究

滚动定位在移动端的研究

浏览:880次  出处信息

   什么是滚动定位,我认为是指滚动行为触发的某些定位展现就是滚动定们,比如觉见的一些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');


   在线demo

   

   需要注意的是,你得明白你这个滚动定位目标元素是否会存在滚动超出底边问题,比如上面jd的页面,当目标导航滚动超出内容的区域,则滚动定位导致消失。比如 这个页面 当你把浏览器窗口调"低"时滚动页面到底部,你会发现滚动定位的元素"跑偏"了,这就是超出底边了,当然你会不会问谁这么奇葩的去这么"玩"啊,但我想说的是既然做这个就尽量做好~

移动端的问题

   就上面的demo在移动端的体验不佳额,因为移动端有个滚动的缓冲,如:

   在线demo

   

   本来我想做个scrollEventhack,就是在手指触摸屏幕开始就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

   

   注:上面demo里测试1是用js实现的,测试2是用css3实现的,体验差太多了

建议继续学习:

  1. iOS的定位原理揭秘    (阅读:4640)
  2. 在python中获取当前位置所在的行号和函数名    (阅读:3844)
  3. div+css+js无缝滚动代码    (阅读:2907)
  4. 小tip: 纯CSS实现视差滚动效果    (阅读:2497)
  5. 常见定位技术有哪些?    (阅读:2470)
  6. IE6 bug: 消失的绝对定位元素    (阅读:1963)
  7. 定位相关的怪异问题    (阅读:1750)
  8. 产品线定位    (阅读:1705)
  9. 全兼容的滚动js脚本    (阅读:1691)
  10. 定位相关的怪异问题    (阅读:1628)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1