html - CSS トラブル、ブートストラップ - マストヘッドの飲み込みページ

Question

私のコードには2つの問題があります：

http://jsfiddle.net/zmgRW/

A) 画像上の位置固定タグのため、実際の html コンテンツは非表示になっています。

つまりこの作品

<div class="container">
                <div class="page-header">
                    <h1>Sticky footer with fixed navbar</h1>
                </div>
                <p class="lead"></p>
                <p>
                    sup
                </p>
            </div>
        </div>

B) ナビゲーションバーをロールアップしてからロックすることで、この効果を生み出したいです!

http://jsfiddle.net/shail/YKaBK/show/

誰でも助けることができますか？

また、私の CSS/HTML のヒントに問題がある場合は、素晴らしいでしょう!

Answer 1

nav が affix になると、通常の navbar CSS スタイルには従わなくなります。外側の DIV コンテナーに ID を指定し、これを「接辞」要素として設定できます。CSS を使用して、幅が 100% になるようにします。

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

ワーキングデモ