Question

我在这里有一个Bootstrap 3页面：http://mj-test.azurewebsites.net/

在全尺寸桌面浏览器（最新的Chrome，1000px最小宽度）上，它具有从页面底部开始的导航;向下滚动时，它会粘在页面顶部。

然而，正如它即将坚持，它会消失一秒钟，然后重新出现在正确的位置（在顶部）。当滚动到页面顶部时，相反的情况反过来：导航栏会短暂消失，然后重新出现在底部。

如何防止它“闪烁”？我已经查看了其他一些问题，例如this，但它们不是同一个问题。

以下是导航栏的HTML：

<nav class="navbar navbar-default" role="navigation" id="navbar-desktop">
    <div class="container-fluid">
        <!-- Brand and Toggle -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
             data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <img src="~/images/menu-nsh-lg.png" class="img-menu" />
            </button>
            <a class="navbar-brand" href="#anch-top">
                <img src="~/images/logo/logo80.png" />
            </a>
        </div>
        <!-- End Brand and Toggle -->
        <!-- Menu -->
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#menu-testimonials-desktop">Moms' Stories</a>
                </li>
                <li>
                    <a href="#menu-products-desktop">Products</a>
                </li>
                <li>
                    <a href="#menu-faq-desktop">FAQ</a>
                </li>
                <li>
                    <a href="#menu-story-desktop">Our Story</a>
                </li>
                <li>
                    <a href="#menu-contact-desktop">Contact</a>
                </li>
                <li class="buy">
                    <a href="http://shop.mimijumi.com/" 
                     class="btn btn-danger btn-sm">Buy</a>
                </li>
            </ul>
        </div>
        <!-- End Menu -->
    </div>
</nav>

以下是启动Bootstrap Scrollspy的JavaScript：

$('body').scrollspy({ target: '#navbar-collapse-1', offset: 55 });

我做错了什么？感谢。

在坚持到顶部之前，Bootstrap导航栏会短暂闪烁

0 个答案: