jQuery位置改变粘性标题

Question

以下是一个模拟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>从position:relative至position:static

示例:http://jsfiddle.net/dMJqj/80/

有什么办法可以使它平滑一点.它在Chrome和Firefox上看起来有点不稳定,有时可能需要几分之一秒来触发,这是显而易见的,因为粘性标题似乎闪烁.

Answer 1

我想你看到的抽搐是 jQuery 和 JavaScript 中性能问题的结果

这些文章提供了一些有关优化脚本性能的丰富技巧：

• 您的 jQuery：现在的糟糕程度减少了 67%
• jQuery 的 5 个性能调优技巧

此外，更重要的是，当列表的abs每次触发事件时，看起来该类都会被重复添加和删除。scrollposition.top < 0

其本身不会导致视觉抽搐，但确实会导致少量内存被不必要地烧毁。

另外，正如上面提到的，您的 HTML 无效。

请参阅此小提琴，其中应用了一些优化技术、有效的 HTML 并删除了一些不必要的类操作：

http://jsfiddle.net/DW4pP/