html - CSS 麻烦，bootstrap - header 吞噬页面

Question

我的代码有两个问题:

http://jsfiddle.net/zmgRW/

A) 由于图像上的位置固定标签，实际的 html 内容被隐藏了。

也就是这一 block

<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

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

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

Working Demo