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之前添加一个小跨度（可能只有一个空格），它的高度相同，所以当它是类被更改仍然会有一些东西来解释高度差异。（更新：你的pad解决方案可能是最好的，一次done right;见下文）< / p>

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

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

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

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

Answer 2

您可以尝试这种方式。我做了一个更短的版本，以便于分析。 fiddle here

<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();
});

滚动时的jQuery Stick标题

2 个答案: