How to add Affix to Bootstrap fixed bottom navbar
发布时间
阅读量：
阅读量
题意 ：
如何将附加项添加到Bootstrap固定底部导航栏
问题背景：
I am aware we can add affix utility to all kind of regular navbar in Bootstrap. In my case, however, I need to add the affix to a specifically navbar-fixed-bottom Navbar.
我知道我们可以将affix工具添加到Bootstrap中的所有常规导航栏中。然而，在我的情况下，我需要将affix添加到一个特定的navbar-fixed-bottom导航栏。
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container" style="height:3000px;"></div>
html
The reason that I would like to do this is presenting the navbar at the bottom of viewport on page loading and on scroll down affix it to the top.
我之所以想这么做，是为了在页面加载时将导航栏显示在视口底部，然后在向下滚动时将其附加到顶部。
Is this doable?
这个可行吗？
问题解决：
You need to add CSS to handle the navbar when affix is applied. In your case, that would be changing the navbar top:0; so that it no longer is fixed to the botttom.
你需要添加CSS来处理应用affix时的导航栏。在你的情况下，就是将navbar的top:0;进行更改，这样它就不再固定在底部了。
.affix.navbar-fixed-bottom {
top: 0;
height: 50px;
}
css
https://www.codeply.com/go/jYikJAul9j
全部评论 (0)
还没有任何评论哟~