Bootstrap nav bar flickers briefly before sticking to top

Question

I have a Bootstrap 3 page here: http://mj-test.azurewebsites.net/

On a fullsize desktop browser (latest Chrome, 1000px minimum width), it has navigation that starts at the bottom of the page; as you scroll down, it sticks to the top of the page.

However, right as it's about to stick, it disappears for a second, then reappears in the correct location (at the top). The same thing happens in reverse when scrolling to the top of the page: the navigation bar disappears briefly and then reappears at the bottom.

How do I prevent it from "flickering"? I've looked at some other questions, such as this, but they're not the same issue.

Here's the HTML of the navigation bar:

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

Here's the JavaScript to kick off the Bootstrap Scrollspy:

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

What am I doing wrong? Thanks.