Javascript jQuery滚动条标题

我制作了一个非常小的片段，使子标题粘贴到顶部。 但是，正如我所说，我决不是一个js天才或jQuery天才，事实上，我与之相去甚远，我对自己的编码能力有怀疑

• 演示如下：

问题是：

• 1-似乎有很多插件（还有很多问题） 在这个网站上）有比我的代码片段多得多的代码-我是什么 丢失的我做错了什么
• 2-跨浏览器工作吗
• 3。。这是一个小问题，如何避免发生小的“跳跃”？ （如果您转到小提琴，然后缓慢地滚动，，您将看到在调用脚本时主div“跳跃”。。 我尝试在较低的分区中添加另一个.pad类-

添加了类：

.pad

当脚本被调用时

.pad{padding top:42px；}

但它似乎不起作用：

• 5.如何计算div的实际位置？当我尝试时 大概是这样的：

它是跳跃的

• 欢迎提出任何其他建议

之所以出现“跳跃”，是因为元素在父元素中占用了空间，当您将其位置更改为“固定”时，它突然不再存在。我不知道处理它的最佳方法，但一种选择是添加一个小跨度（可能只有一个空间）就在你的

#header#u stick

之前，它的高度是相同的，所以当它的级别改变时，仍然会有一些东西来解释高度差异。（更新：你的pad解决方案可能是最好的，一次；见下文）

您的填充解决方案也可能有效，前提是：1）当用户滚动到顶部时，您记得删除该类（在您的小提琴中，我看到您添加了它，但没有看到您删除它）；2） 您的高度正确-我仍然无法仔细查看您的代码，因此我不知道您哪里出错了。（编辑：问题是您的

.pad

类使用的是浮动收割台的高度，而不是棍棒收割台的高度-修复该高度并移除该类产生了我认为最重要的结果）

关于div的实际位置，您是否尝试过从父元素的偏移量中减去div的偏移量？通过这种方式，您将得到它相对于父对象的位置（不过，请注意边界之类的东西——我最近提出了另一个问题，类似这样的细节很重要）

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

---

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

你可以用这种方法试试。为了便于分析，我制作了一个简短的版本。

浮动航向
粘头
1
2
3
4
5
6
7
8
9
10

#ontop{宽度：100%；高度：80px；背景色：黄色；}
标题{宽度：100%；高度：20px；背景颜色：浅灰色；}
#包装{背景色：浅蓝色；高度：5000px；}
.navfixed{位置：固定；顶部：0px；z索引：100；宽度：100%；显示：块；页边距底部：120px；}
.wrapper低于{页边距顶部：22px；}
$（函数（）{
var elem=$（'header'），
wrapperElem=$（“#wrapper”），
elemTop=元素偏移（）.top；
$（窗口）。滚动（函数（）{
elem.toggleClass（'navfixed'，$（window.scrollTop（）>elemTop）；
toggleClass（'wrapperDown'，$（window.scrollTop（）>elemTop）；
}).scroll（）；
});

非常感谢！真的很有帮助。我现在将尝试了解如何计算偏移量，使其更“动态”，而不依赖于硬编码到JS和CSS的像素大小。。再次感谢！我刚看到你在答案上添加的最后一部分。我很谦虚，有你经验的人可以向新手学习。谢谢，它看起来很棒，我现在将在布局和浏览器中进行测试，但看起来很有希望

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

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

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

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