0

Google には、非常にきちんとしたヘッダーを持つ優れたブログがあります。下にスクロールすると、ヘッダーの灰色のバーが上に移動し、画面の上部で停止します (また、派手な z-index トリックも実行しますが、私は'私はそれらに興味がありません）。

私は CSS の position:fixed を認識していますが、Google が行ったように見えるのは、垂直スクロール バーの現在の位置に基づいて position:fixed と position:relative を組み合わせることです。スクロール イベント、派手な数学、および厄介なスクリプト化された jQuery/CSS を使用して、この動作を複製できると思いますが、これとは対照的に、これを行うためのクリーンでエレガントな、おそらくサードパーティのソリューションがあるかどうか疑問に思っています。最初はうまくいくかもしれないし、うまくいかないかもしれない車輪の再発明。

Web ページで Google ブログ スタイルのヘッダーを取得する最もクリーンな方法は何ですか?

編集 - スクロールする要素の上にある要素の高さを指定する必要がない方法がある場合のボーナス ポイント。

4

2 に答える 2

0

jQuery ソリューションの場合、スクロール イベントを使用して上部からのオフセットを決定し、それに応じて DOM 内の要素を調整してヘッダーを「縮小」します。

于 2012-08-03T17:36:46.690 に答える
0

css を (多かれ少なかれ) プレースホルダーで複製し、いくつかの単純な JavaScript を使用すると、非常にスムーズな効果が得られます。

http://jsfiddle.net/n9yPH/31/を参照してください

使用される Jquery は次のとおりです。

$(function()
   {
       var start = $("#second").offset().top;
       $(window).scroll(function(e){
           var top = $("body").scrollTop();
           if (start-top >=0) $("#second").css("top",(start-top)+"px");
           else $("#second").css("top","0px");
       });
   });​
于 2012-08-03T18:11:34.320 に答える