修复了从JavaScript到jQuery的滚动标题转换

我发现并定制了一款出色的滑动/固定头效果。div框将相互推开，成为窗口顶部的下一个固定元素

然而，我一直在努力让这种效果在一个普通的文档中工作。即使我将所有HTML、CSS和JS复制/粘贴到另一个index.HTML文件中，它也不会工作。奇怪的是，它在JSFIDLE中工作得很好，但在其他任何地方都没有

理想情况下，有没有办法将所有这些JavaScript转换成jQuery？我觉得这个解决方案很冗长，不需要所有这些代码行。我将感谢任何帮助，因为此解决方案是完美的，但我无法在常规文档中使用此解决方案。我知道jQuery会更容易使用，但我自己也很难理解很多JS代码

---

这里是我找到这个解决方案的地方，仅供参考。它是一年前更新的，应该在大多数浏览器中仍然有效

这里有一个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:''
        });
      }
    }
  });
});

$（函数（）{
$（窗口）。滚动（函数（）{
var fixedHeads=$（'.fixedheader'）；
对于（变量i=0，c=fixedHeads.length；iprev.offset（）.top）{
var-top=0；
如果（下一个）{
top=页眉.height（）-（next.offset（）.top-window.pageYOffset）；
顶部=顶部<0？0:-顶部；
}
如果（顶部===0）{
//如果有另一个标题，但我们有空间
prev.css（'height'，header.height（）+'px'）；
}
header.css({
位置：'固定'，
顶部：顶部+‘px’
});
}否则{
前面的css（'height'，'0px'）；
//如果我们还没到头球
header.css({
位置：'静态'，
顶部：“”
});
}
}
});
});

您的代码是否在$（文档）中。准备好了吗？。我这样问是因为这是我在从JSFIDLE移动代码时看到的唯一区别。@Shusl不，我没有包括这一点，但目前JS代码没有使用任何jQuery选择器或函数。整个脚本是用纯JavaScript编写的。我认为这就是为什么它在复制到新文档时翻译不好的原因。它使用jQuery为所有Javascript执行onload函数。Javascript或jQuery都应该翻译相同的内容。毕竟，jQuery只是Javascript，我复制/粘贴相同的代码来创建一个html页面，它就可以为我工作了。我所做的唯一更改是删除了在复制代码时附加的“？”标记。@Shusl您能给我发送一份您正在使用的HTML文件副本吗？我的电子邮件是jakerocheleau[在]gmail.com。我很好奇，因为我试过两次复制代码，但对我一点作用都没有。先生，你真是太棒了。这段代码非常简洁，看起来仍然可以完美地工作。我相信你的代码仍然运行得很好。非常感谢！