Bootstrap中的底部到顶部导航3 - Affix？ [英] Bottom to top navigation in Bootstrap 3 - Affix?

问题描述

这是我的第一个问题，所以请原谅我，如果它是可笑/相当模糊。

This is my first question so please excuse me if it is ridiculous/rather vague.

我一直在试图获得导航从底部开始然后滚动时，它会贴到，这类似于此网站。
到目前为止，我所做的只是这样：

I have been trying for days to get a navigation that starts at the bottom and then when scrolled it sticks to the to, something that is similar to this website. All I've managed to do so far is this:

<div id="nav" data-spy="affix" data-offset-top="443" data-offset-bottom="200">
        <nav class="navbar navbar-affix-top navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <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="brand1" href="#why"><img src="http://dummyimage.com/228x63"></a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="#pourquoi">Why why why ?</a></li>
                    <li><a href="#comment">How How How</a></li>
                    <li><a href="#rdv">Action call</a></li>
                    <li><a href="#bio">Who who who</a></li>
                </ul>
            </div>
        </nav>
    </div>

CSS是：

.navbar-nav {
font-size: 1.4em;
font-family: "adelle";
color: #fff;

}




#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:11; }

.navbar-nav > li > a {

color: #fff;
text-align:center;



}

.navbar-nav > li > a:hover{

color: #59aa80;
background-color: transparent;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition:1s;

}

.navbar-nav li.active:after {
content: " .";
display: block;
text-indent: -99em;
color: #fff;
height: 0px;
margin-left: -.8em;
margin-right: auto;
margin-top: 3px;
position: absolute;
left: 50%;
width: 1px;
text-align:center;}
.navbar .nav .active > a {
background-color: none;
background: 0 !important; 
color: #FFF !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
text-align:center;}


.navbar {
background-color: rgba(0,0,0,.7);
box-shadow: 1px 5px 10px rgba(0,0,0,.3);
text-align:center;}

.navbar-header {
padding-left: 40px; }

我搜索了stackoverflow.com以及JSFiddle，Bootply，Bootsnip等没有运气，所以它

I have searched stackoverflow.com as well as JSFiddle, Bootply, Bootsnip etc without any luck so it would be much appreciated if I could get some help.

推荐答案

您可以使用Bootstrap affix <

You can use the Bootstrap affix component to position it to the top once scrolling reaches a specific point.

这是一个工作示例..

Here's a working example..

http://www.bootply.com/121595

这篇关于Bootstrap中的底部到顶部导航3 - Affix？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！