javascript - 在 Bootstrap 中创建一个固定到底部的导航栏，在切换时向上滑动内容

Question

我的网站上有两个导航栏，一个在页眉中，另一个在页脚中

页眉部分工作正常，但我想要的是页脚应该类似于导航栏，但是，当我进入移动 View (较小的视口(viewport))时，会出现一个切换按钮(默认 Bootstrap 功能)但是当单击该切换时，它向下滑动，内容显示在导航栏下方，尽管向上滑动，所以，有人可以帮助我吗？

我不知道，如何在 Fiddle 中包含 Bootstrap，所以直接贴出我的页脚代码。它直接在我的目录中包括 Bootstrap 文件和 Fontawesome 文件。

得到 Bootply关联: http://bootply.com/104001

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a href="#">User Review</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

Answer 1

我能够通过简单地更改顺序来实现它。与其将导航栏标题放在折叠项目之前，不如将其放在之后。这样您就不会依赖定位，也不会在标题栏和展开按钮移动到底部时出现闪烁/跳转。

这是一个演示:http://www.bootply.com/117444

我所做的只是用按钮将折叠项目 div 移动到“标题”div 的前面