带有Bootstrap的静态导航栏

Question

我想在用户滚动时让菜单栏粘在顶部。我曾经使用Bootstrap的类叫做navbar-fixed-top＆＃39;它工作正常。

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

我尝试使用＆＃39; navbar-fixed-top＆＃39;但它出现在Logos上而不是Logos下面。

我的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>