滚动定位在移动端的研究

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

   本来我想做个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

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