粘性导航栏不滚动

Question

我正在用 bootstrap 3 构建一个网站，我希望在这个例子中有这样的导航栏 http://htmlmystore.justthemevalley.com/bigstart/Version3/index.html 我已经完成了用容器 div 包裹的静态导航栏，我尝试从这里实现粘性导航栏：https://www.w3schools.com/howto/howto_js_navbar_sticky.asp 但它不能正常工作，它添加了粘性 class 但导航栏的宽度仅从右侧充满，左侧仍然有装订线，当我向上滚动时，粘性 class 未被删除并且我一直都有粘性导航。这是我的 html 导航代码：

  <nav id="navbar" class="navbar navbar-default">
                    <div class="container">
                        <ul class="nav navbar-nav">
                            <li class="nav-item"><a href="#">1</a></li>
                            <li class="nav-item"><a href="#">2</a></li>
                            <li class="nav-item"><a href="#">3</a></li>
                            <li class="nav-item"><a href="#">4</a></li>
                            <li class="nav-item"><a href="#">5</a></li>
                            <li class="nav-item"><a href="#">6</a></li>
                            <li class="nav-item"><a href="#">7</a></li>
                        </ul>
                    </div>
                </nav>

Answer 1

我不明白真正的问题，但它有效...

window.onscroll = function() {myFunction()};

勾选这个Fiddle

粘性导航栏不滚动

sticky navbar doesn't scroll

html

css

twitter-bootstrap-3

bootstrap-grid