Question

所以当向下滚过标题图像时，我总是在屏幕上显示导航栏。但是，我想要的是，无论何时加载网页，您始终可以看到导航栏。现在你必须向下滚动才能看到导航栏，这对我来说不是理想的外观。以下是http://www.webdingo.net/zoo/所需的效果，此处是指向该网站www.blank.com的链接。我也在使用bootstrap，最后这里是一些相关的代码。

标题/导航的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%;
}

非常感谢任何帮助，感谢您花时间来看看这个！

Answer 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。你会发现它在小提琴中。

请注意：这不是完整的预期结果，但会显示方向。

Answer 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

始终在屏幕上显示导航栏

2 个答案: