javascript - 如何修复 Bootstrap 中的导航栏和轮播图像 slider

Question

我有一个带有导航栏的标题和一个使用 Bootstrap 的轮播滑动图像我怎样才能将这两个固定在滚动条上当用户滚动网站查看信息时，导航栏和旋转木马仍然固定在顶部，信息滚动在标题下

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <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>

            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="aboutus.html">About Us</a>
                    </li>
                       <li>
                        <a href="services.html">Services</a>
                    </li>
                       <li>
                        <a href="factory.html">Factory</a>
                    </li>
                       <li>
                        <a href="projects.html">Projects</a>
                    </li>
                       <li>
                        <a href="client.html">Clients</a>
                    </li>
                       <li>
                        <a href="video.html">Video</a>
                    </li>
                    <li>
                        <a href="contactus.html">Contact Us</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
    <div class="row">
     <img src="img/logo%20corner.png" class="center-block img-responsive imglogo">
    </div>
    <!-- Full Page Image Background Carousel Header -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/slide1.jpg');"></div>
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/slide2.jpg');"></div>
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/slide3.jpg');"></div>
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <!-- Controls -->
        <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>

Answer 1

如果我明白了，我会给你一个链接，你可以在那里找到你的快乐。

http://www.w3schools.com/howto/howto_css_parallax.asp

希望对你有帮助:)