jQuery滚动固定标题

Question

我已经写了一个非常简短的代码片段，使一个子标题粘贴在页面的顶部。但是，正如我所说 - 我并不是一个js或jQuery天才 - 实际上远远不是 - 我对自己的编码能力怀有疑虑...

• 演示地址 : http://jsfiddle.net/obmerk99/VvKq3/1/

问题 :

• 1 - 似乎有很多插件（甚至是这个网站上的问题）比我的代码片段更复杂 - 我错过了什么？我做错了什么？
• 2 - 这能跨浏览器使用吗？
• 3 - 这是个小问题，如何避免发生小的“跳跃”？如果你去fiddle，并且缓慢滚动 - 你会看到主div在调用脚本时产生“跳跃”。我尝试为较低的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. 欢迎提出其他建议...

- Obmerk Kronen

Answer 1

“跳动”是因为该元素在父元素中占用空间，当您将其位置更改为fixed时，它突然不再占用空间了。我不知道处理它的最佳方法，但一个选项是在您的#header_stick之前添加一个小的span（可能只有一个空格），与它的高度相同，这样当它的类被更改时，仍会有一些东西来解决高度差异。（更新：您的垫子解决方案可能是最好的，一旦正确完成；请参见下文）

你的填充方案可能也可行，前提是：1）当用户滚动到顶部时记得删除该类（在你的fiddle中我看到你添加它，但没有看到你删除它）；2）你要正确获取高度 - 我还没有仔细查看你的代码，所以不知道你哪里出错了。（编辑：问题在于你的.pad类使用了浮动标题的高度，而不是粘性标题 - 修复它并删除该类后，我认为得到了正确的结果）

关于div的实际位置，你尝试过从父元素的偏移量中减去div的偏移量吗？这样你就可以得到相对于父元素的位置（注意像边框这样的细节 - 最近我回答了另一个问题，这些细节很重要）。 < p >更新:你的问题在于，当位置改变为fixed时，偏移量也会发生巨大变化。我建议先计算正确的高度，然后将其存储在某个地方，以便滚动函数可以使用它。换句话说，不要在滚动时计算它，这样会更难找到正确的阈值来执行类切换。

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

- mgibsonbr

---

非常感谢！真的很有帮助。我现在会尝试计算偏移量，以便更加“动态”，而不是硬编码到JS和CSS中的像素大小。再次感谢！ - Obmerk Kronen

我刚看到了你在答案中添加的最后一部分，非常感谢有您这样经验丰富的人能够从一个新手身上学到东西.. - Obmerk Kronen

Answer 2

你可以尝试这种方式。我制作了一个更短的版本，以便更容易分析。 在这里查看示例

<div id="ontop">floating heading</div>
<header>sticky heading</header>
<div id="wrapper"> 
    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
</div>



#ontop {width:100%; height:80px; background-color:yellow;}
header {width:100%; height:20px; background-color:lightgrey; }
#wrapper {background-color:lightblue; height:5000px;}

.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px; } 
.wrapperBelow{margin-top:22px;}


$(function () {
    var elem = $('header'),
        wrapperElem = $('#wrapper'),
        elemTop = elem.offset().top;
    $(window).scroll(function () {
        elem.toggleClass('navfixed', $(window).scrollTop() > elemTop);
         wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop);
    }).scroll();
});

- Piotr Ciszewski

---

谢谢，看起来很不错。我现在会在布局和浏览器中进行测试，但它看起来很有前途。 - Obmerk Kronen