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>的{{1}}更改为position:relative

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

有什么方法可以让它平滑一点。它在Chrome和Firefox上看起来有点不稳定，有时可能只需要几分之一秒即可触发，因为粘性标题似乎闪烁。

Answer 1

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

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

此外，当列表的abs

时，看起来scroll类会在position.top < 0事件的每次触发时反复添加和删除

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

另外，如上所述，您的HTML无效。

通过应用一些优化技术，有效的HTML以及删除一些不必要的类操作来查看这个小提琴：

http://jsfiddle.net/DW4pP/

jQuery位置改变粘性标题

1 个答案: