4

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

但是，我一直在努力使这种效果在普通文档中起作用。即使我将所有 HTML、CSS 和 JS 复制/粘贴到另一个 index.html 文件中，它也不起作用。奇怪的是它在 jsFiddle 中运行良好，但在其他任何地方都没有。

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

此处参考是我找到此解决方案的原始堆栈线程。它是在一年前更新的，应该仍然可以在大多数浏览器中运行。

4

1 回答 1

3

这是一个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:''
        });
      }
    }
  });
});
于 2012-09-25T18:06:48.213 回答