2
首先,请注意,我已经知道,我们可以在Bootstrap中添加affix
实用程序到所有类型的常规navbar
,但在我的情况下,我需要添加词缀到具体navbar-fixed-bottom
导航栏。如何在Bootstrap中添加词缀固定底部导航栏
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
<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>
,我想这样做是在页面加载和滚动呈现在导航栏中的viewport
底部的振振有辞下来它贴在上面。
你能告诉我这是否可行吗?
非常感谢以星,但有什么办法,我们可以添加动画呢?我的意思是现在它看起来像导航栏跳到顶部!有什么方法可以让我们在那里平滑滚动吗? – user1760110
是的,这是可能的..你需要为它添加CSS。请阅读此处了解有关词缀类别http://getbootstrap.com/javascript/#affix-usage的信息 – ZimSystem