固定滚动标题从JavaScript转换为jQuery

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

但是,我很难在普通文档中使用此效果.即使我将所有HTML,CSS和JS复制/粘贴到另一个index.html文件中,它也无法正常工作.奇怪的是,它在jsFiddle中完美运行,但在其他任何地方都没有.

理想情况下,有没有办法将所有这些JavaScript转换为jQuery？我觉得解决方案是冗长的,没有必要拥有所有这些代码行.我很感激任何帮助,因为这个解决方案是完美的,除了我不能在常规文档中工作.我知道jQuery会更容易使用,但我很难自己理解很多JS代码.

这里参考的是original stack thread,我找到了这个解决方案.它在一年前更新,应该仍然适用于大多数浏览器.

解决方法:

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

标签：jquery,javascript,scroll,fixed,jsfiddle
来源： https://codeday.me/bug/20190630/1331501.html