2

Bootstrap Affix 機能を使用して、ナビゲーション バーを全幅のレスポンシブ イメージの下に配置しようとしています。ユーザーがスクロールしてナビゲーション バーに到達すると、ユーザーがさらに下にスクロールすると、ナビゲーション バーは画面の上部に固定されます。以下にリンクされている JSFiddle はセットアップに役立ちましたが、上部のオフセットは動的ではないようです。代わりに、ヒーロー画像の元の高さに設定されているようです。そのため、画面サイズを拡大または縮小すると、接辞が意図したとおりに機能しなくなります。

JSFiddle はこちら: http://jsfiddle.net/MarkMarine/q3J56/7/

これは、Javascript でトップ オフセットを動的にしようとするために使用したコードです。

$('#navbar-wrapper').affix({
offset: {
    top: $('.hero-image').height()
}

});

4

1 に答える 1

2

接辞の上部オフセット プロパティを動的にするには、関数として設定する必要があります。

たとえば、js は次のようになります。

$('#navbar-wrapper').affix({
    offset: {
        top: function() {return $('.hero-image').height();}
    }
});

jsfiddle はこちらです。

于 2014-05-01T01:07:10.923 に答える