javascript - 滚动上的 jQuery 粘性标题

Question

我制作了一个非常小的片段，使子标题固定在顶部。 但是，就像我说的那样——我绝不是 js 天才或 jQuery 天才——实际上远非如此——我怀疑自己的编码能力..

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

问题:

• 1 - 似乎有很多插件(还有很多问题 在这个网站上)比我的代码片段多得多的代码 - 我是什么 失踪 ？？我做错了什么？
• 2 - 这能跨浏览器工作吗？
• 3 .. 这是一个小问题，如何避免发生小的“跳跃”？ (如果你去 fiddle ，并慢慢地滚动 - 你会看到主 div 在脚本被调用时“跳跃”.. 我试图将另一个 .pad 类添加到较低的 div -

添加类:.pad 当脚本被调用时。

.pad{padding-top: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 之前添加一个小跨度(可能只有一个空格)，具有相同的高度，所以当它的类发生变化时，仍然会有一些东西来解释高度差异。(更新:你的 pad 解决方案可能是最好的，一次 done right ；见下文)

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

关于div的真实位置，你试过用父元素的偏移量减去div的偏移量吗？这样你就会有它相对于父级的位置(不过要注意边界之类的东西 - 我最近 answered 另一个问题，其中的细节很重要)。

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

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