始终在屏幕上显示导航栏答案

【问题标题】：Always display navigation bar on screen始终在屏幕上显示导航栏
【发布时间】：2014-11-22 03:46:56
【问题描述】：

所以当我向下滚动到标题图像时，导航栏总是在屏幕上。但是，我想要得到的是，每当您加载网页时，您总是可以看到导航栏。现在你必须向下滚动才能看到导航栏，这不是我想要的外观。这是我想要的http://www.webdingo.net/zoo/ 想要的效果，这里是当前网站 www.blank.com 的链接。我也在使用引导程序，最后这里是一些相关的代码。

用于标题/导航的 HTML

    <div class="carousel-inner">
        <div class="item active">
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

<div id="nav-wrapper">
    <nav id="nav" class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <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="#">Start Bootstrap</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Projects</a>
                        </li>
                        <li>
                            <a href="#">Other</a>
                        </li>
                    </ul>
                </div>
            </div>
    </nav>
</div>

标题的css

html,
body {
height: 100%;
}

.carousel,
.item,
.active {
height: 100%;
}

.carousel-inner {
height: 100%;
}

.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

footer {
margin: 50px 0;
}


#nav.affix{
position: fixed;
top: 0;
width: 100%;
}

任何帮助将不胜感激，并感谢您抽出宝贵时间查看此内容！

【问题讨论】：

标签： html css twitter-bootstrap navigationbar

【解决方案1】：

您需要更改 javascript 才能获得动画，但您可以尝试以下操作：（只需尝试在轮播中滚动即可。

DEMO

代码如下：

var mousewheelevt1 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;

$('.carousel-inner').bind(mousewheelevt1, function(e){

        var evt = window.event || e ;
        evt = evt.originalEvent ? evt.originalEvent : evt;
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

     if(delta < 0)
        {
            var nav = document.getElementById('nav');
    nav.style.position = 'fixed';
    nav.style.top = '0px';


        }

});

我对 css 和 html 做了一点改动。你会在小提琴中找到它。

请注意：这不是完整的预期结果，但它会为您指明方向。

【讨论】：

感谢您的帮助。这激发了我得到我想要的东西的想法:)

【解决方案2】：

只需将以下 CSS 添加到您想要粘贴的任何 div 中：

      position: fixed;
      top: 0;      //Which of these you use depends on where you want the menu to stick----   This sticks to the top
      left: 0;      //This sticks to the left
      right: 0;     //This sticks to the right
      bottom: 0;     //This sticks to the bottom

【讨论】：