1

全幅のヒーロー画像の下のナビゲーションバーに接辞を設定しました。望ましい結果は、ナビゲーションバーが上にスクロールし、ページの上部に触れるとすぐに貼り付けられることです。問題は、画像の高さが動的で、全幅の画像であるため、オフセットに固定ピクセルの高さを設定できないことです。jqueryを使用してナビゲーションバーの位置に基づいてオフセットを設定していますが、ナビゲーションバーが一番上に来るとすぐに元の位置に戻ります。

この CSS は、.affix適用時にナビゲーション バーを配置する必要があります

#navbar-wrapper.affix {
top: 0px;
position: fixed;
width: 100%;
}

これは接辞を生成するためのjQueryです

$(function() {
   $('#navbar-wrapper').height($("#nav").height());
});

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

ここに jsfiddle があります: http://jsfiddle.net/MarkMarine/q3J56/4/

以下の応答ごとにいくつかの編集を行いました (そして少し調整しました) 私にとっての修正は、navbar の位置ではなく、接辞オフセットの .hero-image クラスの高さを選択することでした。

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

ありがとうございました！！！後世のために更新されたjsfiddle

http://jsfiddle.net/MarkMarine/q3J56/7/

4

1 に答える 1

1

$('#nav').affix().affixid で div にクラスを追加します#nav。CSS では、#navbar-wrapper.affixこのセレクターを使用して、両方のクラスを持つ要素を選択します。したがって#nav.affix、最初のセレクターでスペースを使用または追加してください#navbar-wrapper .affix。

于 2013-12-06T09:07:48.543 に答える