修复了从JavaScript到jQuery的滚动标题翻译

Question

我发现&定制了一个很棒的jsFiddle演示，它可以实现出色的滑动/固定标题效果。div框将互相推开，成为窗口顶部的下一个固定元素。

然而，我一直在努力让这种效果在一个正常的文件中发挥作用。即使我将所有的HTML、CSS和JS复制/粘贴到另一个index.HTML文件中，它也不会起作用。奇怪的是，它在jsFiddle中完美地工作，但在其他任何地方都没有。

理想情况下，有什么方法可以将所有这些JavaScript转换为jQuery吗？我觉得这个解决方案很冗长，没有必要拥有所有这些代码行。如果能提供任何帮助，我将不胜感激，因为这个解决方案是完美的，但我无法在常规文档中使用它。我知道jQuery会更容易使用，但我自己很难理解大部分JS代码。

作为参考，这里是我发现这个解决方案的原始堆栈线程。它是一年前更新的，应该仍然可以在大多数浏览器中使用。

Answer 1

这是一个jQuery解决方案

$(function(){
$(window).scroll(function(){
var fixedHeads = $('.fixedheader');
for(var i = 0, c = fixedHeads.length; i < c; i++){
var header = $(fixedHeads[i]);
var next = fixedHeads[i+1] ? $(fixedHeads[i+1]) : undefined;
var prev = $(header.prev());
if(window.pageYOffset > prev.offset().top){
var top = 0;
if(next){
top = header.height() - (next.offset().top - window.pageYOffset);
top = top < 0 ? 0 : -top;
}
if(top === 0){
//if there is another header, but we have room
prev.css('height', header.height() + 'px');
}
header.css({
position: 'fixed',
top: top + 'px'
});
} else{
prev.css('height', '0px');
//if we haven't gotten to the header yet
header.css({
position:'static',
top:''
});
}
}
});
});