7

わかりました、これが私が尋ねようとしているものの例です。usatodayのナビゲーション バーです。

ブートストラップ接辞を使用しています。これが私のコードです

<div class="header">
  <div class="header-1">
    <h1>this is some logo</h1>
  </div>
  <div class="header-2">
    <h3>this is some heading</h3>
  </div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
    this is a footer
</div>

JavaScript

$('.header-2').affix({
});

前述のサイトのように、div を上部に固定するにはどうすればheader-2よいですか (スクロールがあり、divheader-2が上部に到達した場合)。

header-1とを見たいのですheader-2が、一部のスクロールは非表示になり、一番上header-1にくっつくはずです。header-2

ありがとう

4

4 に答える 4

5

jquery を使用して、この例を見てください http://jsfiddle.net/5n5MA/2/

var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() {            // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
    $('.fixme').css({
        position: 'fixed',
        top: '0',
        left: '0'
    });
} else {                       // Make it static if you scroll above
    $('.fixme').css({
        position: 'static'
    });
}

});

于 2014-07-03T04:47:18.120 に答える
3

を使用してブートストラップされた答えBootstrap.affix()

$('.header-2').affix({
        offset: {
                 top: function () {
                      return (this.top = $(".header-2").offset().top);
                }
        }
});

これには、固定配置用の CSS も必要です (ドキュメントを参照してください)。

affix プラグインは、それぞれ特定の状態を表す 3 つのクラス (.affix、.affix-top、および .affix-bottom) を切り替えます。実際の位置を処理するには、(このプラグインとは別に) これらのクラスのスタイルを自分で提供する必要があります。

.header-2.affix {
   top: 0;
}

Bootply での作業例: http://www.bootply.com/S03RlcT0z0

于 2014-07-03T06:10:15.550 に答える
1 
<style>
  .header {
    top: 0%;
    left: 0%;
    width: 100%;
    position:fixed;
}
</style>

問題を注意深く見ておらず申し訳ありません。

これは、修正されたヘッダーとブートストラップ アフィックス/Scrollspy の問題に役立つ場合があります- 正しい場所にジャンプしない

于 2014-07-03T04:43:41.143 に答える