如何创建一个粘性导航栏，在滚动后固定到顶部 [英] How to create a sticky navigation bar that becomes fixed to the top after scrolling

问题描述

我正在尝试在网站首次加载时在导航栏的底部显示导航栏，然后当用户向下滚动时，导航栏向上滚动，最终固定在顶部。我使用Bootstrap，就像这个网站，但我不知道这个网站是如何做到的。任何帮助？

I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?

这是网站的导航栏我试图模仿： http://www.blastprocessor.co.uk/

Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/

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

Here's my navigation html and css code:

HTML：

<div class="navbar navbar-fixed-top" id="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#service-link">Services</a></li>
                    <li><a href="#contact-link">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

这里是我的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;}

推荐答案

）：以下问题和答案都适用于旧的，已弃用的 Twitter Bootstrap 2.x版。

Note (2015): Both question and the answer below apply to the old, deprecated version 2.x of Twitter Bootstrap.

这种制作功能和元素sticky内置在Twitter的Bootstrap中，它被称为 Affix 。所有你要做的是添加：

This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix. All you have to do is to add:

<div data-spy="affix" data-offset-top="121">
  ... your navbar ...
</div>

，不要忘记加载Bootstrap的JS文件，如手动。数据属性 offset-top 指示页面滚动（从顶部）以修复菜单组件的像素数。通常只是页面顶部的空间。

around your tag and do not forget to load the Bootstrap's JS files as described in the manual. Data attribute offset-top tells how many pixels the page is scrolled (from the top) to fix you menu component. Usually it is just the space to the top of the page.

注意：当菜单被修复时，你将需要处理缺少的空间。固定意味着将其从页面层中剪切掉并粘贴到不滚动的不同层中。我执行以下操作：

Note: You will have to take care of the missing space when the menu will be fixed. Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll. I am doing the following:

<div style="height: 77px;">
  <div data-spy="affix" data-offset-top="121">
    <div style="position: relative; height: 0; width: 100%;">
      <div style="position: absolute; top: 0; left: 0;">
        ... my menu ...
      </div>
    </div>
  </div>
</div>

其中 77px 组件。

这篇关于如何创建一个粘性导航栏，在滚动后固定到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！