以下是一个模拟iOS设备上看到的粘性标题效果的小脚本.
$('.scrolllist').scroll(function(){
$(this).find('ul').each(function(){
if($(this).position().top <= 0){
$(this).addClass('abs').find('strong').removeClass('mov');
if($(this).position().top <= ($(this).height() * -1)){
$(this).removeClass('abs');
$(this).find('strong').addClass('mov');
}
else {
$(this).addClass('abs');
$(this).find('strong').removeClass('mov');
}
}
else {
$(this).removeClass('abs').find('strong').removeClass('mov');
}
});
});
它通过从postion更改其状态来更改每个元素的位置：absolute,top：0到position：absolute,bottom：0;同时也改变含有的< ul>从位置：相对于位置：静态
样品：http://jsfiddle.net/dMJqj/80/
有什么办法可以使它平滑一点.它在Chrome和Firefox上看起来有点不稳定,有时可能需要几分之一秒来触发,这是显而易见的,因为粘性标题似乎闪烁.
解决方法
我想你所看到的抽搐是jQuery和JavaScript中性能问题的结果
> Your
jQuery: Now With 67% Less Suck
> 5 Performance Tuning Tricks for jQuery
另外 – 更重要的是,当列表的position.top<时,看起来abs类会在每次触发滚动事件时重复添加和删除. 0 本身不会导致视觉抽搐,但它确实会导致少量内存不必要地被烧毁. 另外,如上所述,您的HTML无效. 通过应用一些优化技术,有效的HTML以及删除一些不必要的类操作来查看这个小提琴： http://jsfiddle.net/DW4pP/
