4

見事なスライド/固定ヘッダー効果を実行する素晴らしいjsFiddle デモを見つけてカスタマイズしました。div ボックスは互いに邪魔にならないように押し合い、ウィンドウの上部にある次の固定要素になります。

ただし、この効果を通常のドキュメントで機能させるのに苦労しています。すべての HTML、CSS、および JS を別の index.html ファイルにコピー アンド ペーストしても機能しません。jsFiddle では完全に機能しているが、他の場所では機能していないのは奇妙です。

理想的には、このすべての JavaScript を jQuery に変換する方法はありますか? 解決策は冗長であり、これらすべてのコード行を含める必要はないと思います。通常のドキュメントではこれを機能させることができないという事実を除いて、このソリューションは完璧なので、助けていただければ幸いです。jQuery の方が使いやすいことはわかっていますが、JS コードの多くを自分で理解するのに苦労しています。

参考までに、このソリューションを見つけた元のスタック スレッドを次に示します。これは 1 年前に更新されたもので、ほとんどのブラウザーで引き続き動作するはずです。

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 に答える