Bootstrap固定导航栏在移动浏览器中没有坚持到顶部

Question

我正在网站上工作，并注意到导航栏在移动浏览器中无法正常工作，特别是Chrome。当我快速向下滚动时会发生这种情况：Fixed navbar bug

如果你看不到图片，看起来导航条顶部有边距或填充，你可以在导航栏和镶边菜单之间看到它上面的内容。

html：

<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">

        <div class="container-fluid" id="nav">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" 
                  data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand navButton" href="#nav">JakeTheDeveloper</a>

            </div>

            <div id="navbar" class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                    <li><a class="navButton" href="#aboutH">About</a></li>
                    <li><a class="navButton" href="#projectsH">Projects</a></li>
                    <li><a class="navButton" href="#contactH">Contact</a></li>
                    <li><a href="blog.html">Blog</a></li>

                </ul>

            </div>

        </div>

    </nav>

可能导致这种情况的原因是什么？我已经尝试将margin和padding明确地设置为0，但这并没有解决问题。