web-dev-qa-db-ja.com

スクロールした後のスティッキーヘッダー？

さて、これが私が尋ねようとしていることの例です、 satoday のナビゲーションバー。

私はbootstrap affixを使用しています。これが私のコードです

<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を上部に固定するにはどうすればよいですか（スクロールがあり、div header-2が上部の位置に到達した場合）。

header-1とheader-2を見たいのですが、スクロールするとheader-1が非表示になり、header-2が一番上に表示されます。

ありがとう

javascriptjqueryhtmltwitter-bootstrapaffix
7
x0x

これを参照してください Jsfiddle

スライダーの位置を確認し、それに応じてクラスを追加できます

$(window).scroll(function () {
    if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
      $('#header-2').addClass('posi');
    } else if ($(window).scrollTop() == 0){
      $('#header-2').removeClass('posi');
    }
});
13
John

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'
    });
}

}）;

5
Shailendra Sharma

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

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

これには、固定位置のCSSも必要です（ Docs を参照）。

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

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

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

3
Pete TNT
<style>
  .header {
    top: 0%;
    left: 0%;
    width: 100%;
    position:fixed;
}
</style>

あなたの問題を注意深く見なかったのは残念です。

これはあなたを助けるかもしれません 固定ヘッダーとBootstrap Affix/Scrollspy-正しい場所にジャンプしない）の問題

1
TooJuniorToCode