滚动时的jQuery Stick标题 [英] jQuery Stick header on scroll

问题描述

我制作了一个小小的片段，以便将一个子标题贴在顶部。
但是，就像我说的那样 - 我绝不是一个js genious或jQuery genious - 实际上远非它 - 我对自己的编码能力有疑问..

I have made a rediculasly small snippet to make a sub-header stick to the top. But since , Like I said - I am by no means a js genious or jQuery genious - and actually far from it - I have my doubts about my own coding abilities..

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

• the demo is here : http://jsfiddle.net/obmerk99/VvKq3/1/

问题：

• 1 - 似乎有很多插件（在这个网站上还有很多问题也是
  ），代码比我的代码段多得多 - 我是什么？
  失踪 ？？我做错了什么？


• 2 - 这会跨浏览器吗？


• 3 ..这是一个小问题，如何避免发生的小跳跃？
  （如果你去小提琴，然后慢慢地滚动 - 当脚本被唤起时你会看到主div跳..
  我试图添加另一个.pad类到较低的div -

• 1 - there seems to be a lot of plugins (and a lot of questions also in this very site) with much more code than my snippet - what am i missing ?? What am I doing wrong ?
• 2 - will this work cross-browser ?
• 3 .. and this is a small problem, how to avoid the small "jump" that occurs ? (if you go to the fiddle, and scroll slowly - you will see that the main div "jumps" when the script is evoked .. I have tried to add another .pad class to the lower divs -

添加了类： .pad 何时引起的脚本。

added class : .pad when script evoked.

.pad {padding-top：42px;}

.pad{padding-top:42px;}

但它似乎无法正常工作： http://jsfiddle.net / obmerk99 / VvKq3 / 2 /

but it does not seems to work right : http://jsfiddle.net/obmerk99/VvKq3/2/

• 5.当我尝试$时，我如何计算div的实际位置？ b $ b类似这样：

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欢迎任何其他建议。 。

推荐答案

发生跳跃是因为元素占据了父元素中的空间，当你将其位置改为 fixed 时，它突然不再存在了。 我不知道处理它的最佳方法，但是一个选项是在 #header_stick 之前添加一个小跨度（可能只有一个空格），与它的高度相同，所以当它的类被改变时，仍然会有一些东西来解释高度差。（更新：你的pad解决方案可能是最好的，一次做得好;见下文）

The "jumping" occurs because the element was occupying space in the parent element, and when you change its position to fixed it's suddenly not anymore. I don't know the best way to handle it, but one option would be adding a small span (maybe with a single space) just before your #header_stick, with the same height of it, so when it's class is changed there will still be something there to account for the height difference. (Update: your pad solution is probably the best one, once done right; see below)

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

Your padding solution might also work, provided that: 1) you remember to remove that class when the user scrolls to the top (in your fiddle I see you adding it, but don't see you removing it); 2) You get the height right - I still couldn't look closely to your code, so I don't know where you got wrong. ( the problem was that your .pad class was using the height of the floating header, not the stick header - fixing that and removing the class yielded what I believe to be the correct result)

关于div的实际位置，您是否尝试从父元素的偏移量中减去div的偏移量？通过这种方式你可以获得相对于父母的位置（注意边界之类的东西 - 我最近已经回答另一个问题，这样的细节很重要。）

About the real position of the div, have you tried subtracting the div's offset from the offset of the parent element? This way you'll have its position relative to the parent (pay attention to things like borders, though - I've recently answered another question where details like this mattered).

更新：这里的问题似乎是，当位置变为固定时，抵消也变化很大。我建议一次计算正确的高度，然后将其存储在某处，以便滚动功能可以使用它。换句话说，不要在滚动时计算它，这使得找到正确的theshold进行类切换变得更加困难。

Update: your problem here seems to be that, when the position is changed to fixed, the offset also varies wildly. I'd suggest calculating the correct height, once, then storing it somewhere so the scroll function can use it. In other words, don't calculate it while scrolling, that makes it much more difficult to find the right theshold to do the class switch.

除此之外，我认为你的代码很好，而且我相信它也适用于跨浏览器（至少符合标准的那些;不能说任何关于旧版本的IE）。非常有见地，我总是想知道这个技巧是如何起作用的，现在我觉得它比我想象的要简单......

Other than that, I think you're code is fine, and I believe it will work cross browsers too (at least standards compliant ones; can't say anything about old versions of IE). Very insightful too, I always wondered how this "trick" worked, now I see it's simpler than I imagined...

这篇关于滚动时的jQuery Stick标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！