3

私はcssでのポジショニングにかなり慣れていません（たとえば、相対、固定、絶対）。私がやろうとしているのは、画面の上部に固定のナビゲーションバーを作成し、ユーザーがコンテンツを下にスクロールしている間、そこにとどまるようにすることです。

これは、absolute、top：0、left：0として配置することで簡単に実現できます。問題は、ユーザーがナビゲーションメニューの[連絡先]をクリックすると下にスライドする非表示の連絡先パネルがあることです。ナビゲーションバーを下に移動して、コンタクトパネルの下に表示したいと思います。そのため、ナビゲーションを絶対位置から固定位置に変更する必要がありました。これにより、連絡先パネルの下に移動できましたが、スクロールを続けると、ナビゲーションバーはウィンドウの最上部ではなく中央に残ります。

ここにいくつかのサンプルコードがあります：http：//jsfiddle.net/hwDwR/51/

要約すると、ナビゲーションバーがウィンドウの上部に到達するまで、緑色のナビゲーションバーを青色のコンタクトパネルに「固定」する必要があります。非表示のコンテンツを表示した後でも、ナビゲーションバーを常に上部に表示したい（非表示のdivを表示する前に表示されるように）。

うまくいけば、私がやろうとしていることを説明することができました。どんな助けでも大歓迎です！

**解決済み：返信ありがとうございますが、これは私が目指していた効果です：http: //jsfiddle.net/hwDwR/66/（6時間以内に回答として投稿されます）

4

4 に答える 4

1

これを試してください：http://jsfiddle.net/z2LVR/

動作していた理由は、コンテンツ div が固定された上に存在していたためです。div

それが原因に適合することを願っています:)

コード 

 <div id="nav">
     my | nav | bar | contact (click me)
 </div>
  <div class="panel">
  Contact information to slide down (and stay down).
 </div>




$(document).ready(function(){
  $("#nav").click(function(){
    $(".panel").slideDown("slow"); // you can use slideToggle if you want. Just a suggestion.
  });
});
于 2012-09-18T01:01:58.793 に答える
0

これは私が求めていた効果です: http://jsfiddle.net/hwDwR/66/

返信ありがとうございます。私はこれに 1 日か 2 日困惑していました。

于 2012-09-19T01:27:41.260 に答える
0

click次の行をハンドラーに追加します。

$("#nav").animate({'top':'200px'},'slow');

に追加position: fixedします.panel

于 2012-09-18T01:34:24.993 に答える
0

http://jsfiddle.net/jklm313/hwDwR/57/

「nav」と「panel」を div でラップし、固定位置を適用しました。

于 2012-09-18T01:40:34.830 に答える