Bootstrap 静态导航栏

Question

我想让菜单栏在用户滚动时保持在顶部。我曾经使用 Bootstrap 的 class 称为 'navbar-fixed-top'，它工作正常。

但是用户想在导航栏上方添加一些品牌和标志。但他们不希望这些徽标在用户滚动时停留在顶部。他们只想在这些徽标下方粘贴导航栏。

我尝试使用 'navbar-fixed-top' 但它出现在徽标上而不是徽标下方。

我的HTML:

<div class="container">
    <nav class="col-md-12 text-left">
        // Code for Logos and Images
    </nav>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">

        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            <li>.....</li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

如何使导航栏固定在顶部（而不是徽标）？

Answer 1

首先从 NAV 标签中删除 navbar-fixed-top 并将此代码放在 head 标签中

    <script>
        $(window).scroll(function() {
            var height = $(window).scrollTop();
            if(height  <= 100) {
                $("nav").addClass("navbar-fixed-top");
            }
            if(height  <= 10) {
                $("nav").removeClass("navbar-fixed-top");
            }
        });
    </script>

Bootstrap 静态导航栏

Static Nav Bar with Bootstrap

css

navbar

twitter-bootstrap-3