带 Bootstrap 的静态导航栏

Question

我想让菜单栏在用户滚动时粘在顶部。我曾经使用 Bootstrap 的名为 '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>