jQuery位置改变粘性标题答案

【问题标题】：jQuery position altering for sticky headersjQuery位置改变粘性标题
【发布时间】：2012-10-05 00:07:57
【问题描述】：

下面是一个模拟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:0 更改为position:absolute, bottom:0; 来更改每个元素的位置，同时还将包含的<ul> 从position:relative 更改为position:static

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

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

【问题讨论】：

在 FF 和 Chrome 中对我来说看起来很流畅。 strongs 与滚动条重叠会让我更加恼火。
这里的一个潜在问题是您的代码无效。 ul 只能将 lielements 作为其直接子级。因此，您需要将 strong 标签包装在 li 中，或者将它们移到 ul 之外。
@Christoph 这也很烦人。你知道如何阻止它这样做吗？
正如 Christoph 已经提到的，您的 HTML 无效。您可以使用普通的<li>Elements 和使用:first-child 选择器轻松避免购买。另外，请查看 John Resig 的以下文章，其中他解释了如何处理滚动事件：ejohn.org/blog/learning-from-twitter

标签： jquery scroll position absolute

【解决方案1】：

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

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

此外——不仅如此，看起来abs 类在列表的position.top < 0 每次触发scroll 事件时被重复添加和删除

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

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

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

http://jsfiddle.net/DW4pP/

【讨论】：

我只是 +1 ，因为我写了你链接的一篇文章，我是一个自负的混蛋。 ;)