5

表示されなくなったときに固定ヘッダーの位置を採用するナビゲーションバーを導入しようとしています。このスレッドを使用して開始しました: Replicating Bootstraps main nav and subnav。

それ以来、私はhttp://jsfiddle.net/yTqSc/2/にたどり着きました。

問題:

アンカー リンクは、ナビゲーション バーが元の位置にあるときはいつでもターゲットをオーバーシュートします (目的地の見出しを隠します) 。オーバーシュートを修正できます ( http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/を参照しました) が、ナビゲーション バーが修正されると、リンクを使用して過剰なギャップが発生します。

ナビゲーションバーが固定されているかどうかに関係なく、一貫した結果を得る方法を誰かアドバイスできますか?

ありがとう。

4

3 に答える 3

15

これはあなたが探しているものですか？

<div class="navbar navbar-fixed-top">
于 2012-08-24T18:06:42.890 に答える
4

navbar-fixed-top の CSS がありません。また、上にスクロールするときにも処理する必要があります。

デモを見る http://jsfiddle.net/yTqSc/39/

JavaScript

$(document).scroll(function(){
var elem = $('.subnav');
if (!elem.attr('data-top')) {
    if (elem.hasClass('navbar-fixed-top'))
        return;
     var offset = elem.offset()
    elem.attr('data-top', offset.top);
}
if (elem.attr('data-top') <= $(this).scrollTop() )
    elem.addClass('navbar-fixed-top');
else
    elem.removeClass('navbar-fixed-top');
});

CSS

.subnav {
    background:#FFF;
}
.navbar-fixed-top {
    position:fixed;
}

または、Waypoints jquery プラグインを使用してスティッキー要素を処理します。

于 2013-04-05T22:47:25.083 に答える
0

それは良かったのですが、このように上ではなく下に固定ナビゲーションを実装することに夢中になりました: http://golkhaneh.tv3.ir/

どうすればそれができますか？

于 2013-10-29T15:14:32.813 に答える