6

数日間ブーストラップで遊んでいて、その機能に驚かされました。

ユーザーが下にスクロールしたときに上部に固定される、ある種の「ヘッダー」を作成しようとしています。

ここで私の現在の作品を見つけることができます: http://mp3dj.free.fr/affix/site/

ただし、下にスクロールすると、「POST 1」が突然ページの上部にジャンプすることに気付くでしょう。つまり、ここのようなスムーズなスクロールはありません: http://jsfiddle.net/namuol/Uaa3U/

現在のコード:

<div class="container">
  <div class="row affix-top" data-spy="affix" data-offset-top="60">
    <div class="span12">
      <div class="row">
        <div class="span3">
          <img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
        </div>
      <div class="span9"><h1>Samantha Sam</h1></div>
    </div>
  </div>
</div>
  <div class="row">
    <div class="span12">
      <div id="post1" class="box">
        <h1>Post 1</h1>
        <p> Scroll Down↓&lt;/p>
      </div>
      <div id="post2" class="box"><h1>Post 2</h1></div>
      <div id="post3" class="box"><h1>Post 3</h1></div>
     </div>
   </div>   
</div>

どんな助けでも大歓迎です！

4

2 に答える 2

15

コードで何が起こるかは、上部fixedへのオフセットが 60px より小さいときに、上部の行がその位置を変更することです。その結果、次の行より上のスペースの消費が停止します。

紹介した jsfiddle には、理解する必要があり、役立つはずの JS コードがあります。これはあなたのために：

$('#nav-wrapper').height($("#nav").height());

ヘッダーを別のヘッダー(フィドルでdiv呼び出されるクラス) 内に配置する必要があります。nav-wrapper上記の JQuery コードは、ページの初期化中に行の高さに基づいて高さを設定します。一番上の行が消えても（固定されて）、高さは同じままです。

JS コードの別の部分:

$('#nav').affix({
    offset: $('#nav').position()
});

を使用すると、一番上の行の上のスペースのサイズに依存しなくなりますが、あなたの場合は必要ないと思います (常に 60px かかると予測できます)。

于 2012-11-24T23:38:45.550 に答える
0

Marcin Skórzewski のソリューションを使用する場合、navbar で折りたたみを使用している場合、ドロップダウンに影響することに注意してください。

  • 完全なナビゲーション バーの高さは、小さな JS コードを使用して設定されます。
  • ウィンドウが小さくなると、ナビゲーション バーは ||| に置き換えられます。(デフォルトのブートストラップを使用)
  • ドロップダウンを使用しているときに ||| を押します。ドロップダウンを表示するには、下のコンテンツの後ろに配置されます。コンテンツが下にスライドしません。これは、ナビゲーションバーの高さが設定されているためです。

考えられる解決策 1: ||| をクリックしたときにナビゲーション バーの高さを削除する ドロップダウンがスライドして戻ってきたら、もう一度元に戻します。考えられる解決策 2: navbar が固定されたら、次の要素に margin-top を追加する

更新: https://stackoverflow.com/a/15177077/1059884 CSS を使用した優れたソリューション

于 2013-08-27T15:40:39.583 に答える