上一篇有讲到采取 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，所以其实原理就是在点击滑动开始的时候就将粘性布局去掉，而滑动点击结束的时候重新恢复粘性布局
