滚动时的jQuery Stick标题

Question

我制作了一个小的小片段,使得一个子标题贴在顶部.但是,就像我说的那样 - 我绝不是js genious或者jQuery genious - 而且实际上远非如此 - 我对自己的编码能力表示怀疑.

• 演示在这里:http://jsfiddle.net/obmerk99/VvKq3/1/

问题:

• 1 - 似乎有很多插件(在这个网站上也有很多问题),代码比我的代码片段多得多 - 我错过了什么？我究竟做错了什么 ？
• 2 - 这将跨浏览器工作吗？
• 3 ..这是一个小问题,如何避免发生的小"跳"？(如果你去小提琴,慢慢滚动- 当脚本被唤起时你会看到主div"跳"..我试图将另一个.pad类添加到较低的div中 -

添加了类:.pad当脚本被唤起时.

.pad {填充顶:42PX;}

但它似乎不正常:http://jsfiddle.net/obmerk99/VvKq3/2/

• 5,如何计算div的实际位置？当我尝试这样的事情:

var top = jQuery(window).scrollTop();

var div_top =  jQuery('#header_stick').offset().top;

if (top > div_top) // height of float header;

它是跳跃的... http://jsfiddle.net/obmerk99/VvKq3/4/

• 6欢迎任何其他建议..

Answer 1

发生“跳跃”是因为该元素占据了父元素中的空间，而当您将其位置更改为fixed它时，它突然不再占据了。我不知道处理它的最佳方法，但一种选择是在您的之前添加一个小跨度（可能有一个空格）#header_stick，其高度相同，所以当它的类改变时，仍然会有一些东西那里要考虑高度差。（更新：一旦正确完成，您的垫解决方案可能是最好的解决方案；见下文）

您的填充解决方案也可能有效，前提是：1）您记得在用户滚动到顶部时删除该类（在您的小提琴中，我看到您添加了它，但没有看到您删除它）；2）你的高度是正确的 - 我仍然无法仔细查看你的代码，所以我不知道你错在哪里。（编辑：问题是你的.pad类使用的是浮动标题的高度，而不是棒标题 - 修复该问题并删除类产生了我认为正确的结果）

关于div的真实位置，您是否尝试过从父元素的偏移量中减去div的偏移量？这样你就可以得到它相对于父级的位置（不过要注意边框之类的东西 - 我最近回答了另一个问题，其中此类细节很重要）。

更新：您的问题似乎是，当位置更改为固定时，偏移量也会发生很大变化。我建议计算一次正确的高度，然后将其存储在某个地方，以便滚动函数可以使用它。换句话说，不要在滚动时计算它，这使得找到正确的阈值来进行类别切换变得更加困难。

除此之外，我认为你的代码很好，而且我相信它也可以跨浏览器工作（至少是符合标准的浏览器；不能说旧版本的 IE）。也很有见地，我一直想知道这个“技巧”是如何起作用的，现在我发现它比我想象的要简单......