在引导程序中创建固定到底部的导航栏,在切换时向上滑动内容

Question

我在我的网站上有两个导航栏,一个在标题中,另一个在页脚中

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

我不知道,如何在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

我所做的只是用按钮移动"header"div前面的折叠项div