由 position:sticky引起的offset.top 为

上一篇有讲到采取 position:sticky 的布局方案，使得在iOS环境下顶部标题可以达到一种粘性的效果：http://www.jianshu.com/p/aab5f801502b

但是我们由另一个需求，就是在界面的右边有一个可以上下滑动的字母选择效果，而正是因为采取了 position:sticky 的方式，导致了当手势向上滑动，或者从上往下点然后再回到上面点击的时候，调试得到$('#letter').offset.top为0，也就是说，当下面的标题被往上滑动过后，得到的position也好，offset也好，都是0了，本质上就是都被sticky同时顶到top=0的位置，如何解决呢？

我首先贴一下具体的代码（代码还未优化和重构，仅当了解）：

var leftli = this.leftInnerArea[0].querySelector('ul');
var _this = this;
var numArray = new Array('top','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'j','K', 'L', 'M', 'N', 'O', 'P','Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'default');

//test start
leftli.addEventListener('touchstart',function(e){
               e.preventDefault();
               _this.$el.find('.list-head').removeClass('list-head-sticky');

               // this.offsetH = e.currentTarget.offsetHeight;
               var target = $(e.target);
               var _index = target.index();

               var letter = target.text();
               var lineNum = (event.changedTouches[0].clientY - $(e.currentTarget).offset().top) / e.target.offsetHeight;

               // letter = _this.getLetterByNum(Math.round(lineNum));
               letter = numArray[Math.round(lineNum)];
               if($('#'+letter).length > 0){
                   var LetterTop = $('#'+letter).position().top;
                   _this.myScrollTop = $('.all-wrapper').scrollTop();
                   $('.all-wrapper').animate({
                       scrollTop: Number(LetterTop) + Number(_this.myScrollTop) +'px'
                   }, 100);
               }
});
leftli.addEventListener('touchmove',function(e){
               e.preventDefault();
               _this.$el.find('.list-head').removeClass('list-head-sticky');
               var target = $(e.target);
               var _index = target.index();

               var letter = target.text();

               var lineNum = (event.changedTouches[0].clientY - $(e.currentTarget).offset().top) / e.target.offsetHeight;

               // letter = _this.getLetterByNum(Math.round(lineNum));
               letter = numArray[Math.round(lineNum)];
               if($('#'+letter).length > 0){
                   var LetterTop = $('#'+letter).position().top;
                   _this.myScrollTop = $('.all-wrapper').scrollTop();
                   $('.all-wrapper').animate({
                       scrollTop: Number(LetterTop) + Number(_this.myScrollTop) +'px'
                   }, 1);
               }
});
leftli.addEventListener('touchend',function(e){
               e.preventDefault();

               _this.$el.find('.list-head').addClass('list-head-sticky');
               console.log(6);
               var target = $(e.target);
               var _index = target.index();

               var letter = target.text();
               var lineNum = (event.changedTouches[0].clientY - $(e.currentTarget).offset().top) / e.target.offsetHeight;

               // letter = _this.getLetterByNum(Math.round(lineNum));
               letter = numArray[Math.round(lineNum)];

               if($('#'+letter).length > 0){
                   var LetterTop = $('#'+letter).position().top;
                   _this.myScrollTop = $('.all-wrapper').scrollTop();
                   $('.all-wrapper').animate({
                       scrollTop: Number(LetterTop) + Number(_this.myScrollTop) +'px'
                   }, 1);
               }
               leftli.removeEventListener('touchmove',this,false);
});
           //test end

这里主要几个点：
1、利用animate和scrollTop主要是针对局部布局内的滑动效果，scrollTop的距离是由上一次scrollTop之后的值和和当前要移动的dom元素的top值决定
2、$(e.target).index()，主要是用来获取右侧字母条选中的第几个，以此来根据数组位置定位需要滑动的dom
3、最后一个就是关于position:sticky的问题，这里主要是在touchstart和touchmove:

_this.$el.find('.list-head').removeClass('list-head-sticky');

和touchend:

_this.$el.find('.list-head').addClass('list-head-sticky');

这里的样式就是我们的position:sticky，所以其实原理就是在点击滑动开始的时候就将粘性布局去掉，而滑动点击结束的时候重新恢复粘性布局