Question

我找到了＆amp;定制了一个令人敬畏的jsFiddle demo，它可以执行出色的滑动/固定标题效果。 div框将相互推开，成为窗口顶部的下一个固定元素。

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

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

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

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:''
        });
      }
    }
  });
});

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

1 个答案: