8

下面是一个模拟在 iOS 设备上看到的 Sticky header 效果的小脚本。

$('.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:0to更改为position:absolute, bottom:0;同时更改包含<ul>from position:relativeto 来更改每个元素的位置position:static

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

有什么办法可以让它稍微平滑一点。它在 Chrome 和 Firefox 上看起来有点生涩，有时可能需要几分之一秒的时间才能触发，这很明显，因为粘性标题似乎闪烁。

4

1 回答 1

2

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

这些文章包含一些关于优化脚本性能的技巧：

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

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

同样如上所述，您的 HTML 无效。

看到这个小提琴应用了一些优化技术，有效的 HTML 和一些不必要的类操作的删除：

http://jsfiddle.net/DW4pP/

于 2012-10-04T16:07:57.393 回答