html怎么置顶导航栏,html – 如何创建一个粘性导航栏,在滚动后固定到顶部

我试图做一个导航栏出现在可视页面的底部，当网站第一次加载，然后当用户向下滚动，导航栏向上滚动，最终固定在顶部。我使用Bootstrap，就像这个网站，但我不知道这个网站是如何做到的。任何帮助？

这里是我的导航html和CSS代码：

HTML：

• Home
• Services
• Contact

这里是我的CSS：

.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}

.navbar .nav > li a{

color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;

}

.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {

color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;

}

.navbar .nav > li {padding:2em;}

.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}

.navbar .nav, .navbar .nav > li {

float:none;

display:inline-block;

*display:inline; /* ie7 fix */

*zoom:1; /* hasLayout ie7 trigger */

vertical-align: top;

padding:0 2em;

}

.navbar-inner {text-align:center;}

.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}