html - CSS trouble, bootstrap - masthead swallowing page

Question

There is two issues with my code:

http://jsfiddle.net/zmgRW/

A) the actual html content is hidden because of the position fixed tag on the image.

Namely this piece

<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) I would like to produce this effect with the navbar rolling up and then locking!

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

Can anyone help?

Also if there are any problems with my CSS/HTML tips would be awesome!

Answer 1

一旦导航变成词缀，它就不再遵循正常的导航栏 CSS 样式。您可以为外部 DIV 容器提供一个 id，然后将其设置为 `affix' 元素。使用 CSS 确保它保持 100% 的宽度。

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

工作演示