Question

我的问题是我的页面内容正在通过我的导航栏，我希望导航栏始终位于顶部..我的导航栏是通过jquery制作的，我相信它被称为“Sticky Navbar”（这是示例）我跟着：http://codepen.io/anon/pen/jpCqb）..我尝试过使用z-index：-1;但这对我来说也不起作用..在我的页面上我使用了一个引导轮播..：

    <!-- start pageHeader, navbar and carousel get grouped -->
    <div class="" id="page">

        <!-- start myCarousel -->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- 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">
              <img src="images/slide1-1920x800.jpg" alt="...">
              <div class="carousel-caption">
                  <h2>App Name Here</h2>
                  <p>An app that's actually worth donwloading.</p>
              </div><!-- end item -->
            </div><!-- end carousel-caption -->
            <div class="item">
              <img src="images/slide1.1-1920x800.jpg" alt="...">
              <div class="carousel-caption">
              </div><!-- end carousel-caption -->
            </div><!-- end item -->
            <div class="item">
              <img src="images/slide1.2-1920x800.jpg" alt="...">
              <div class="carousel-caption"><!-- end carousel-caption -->
              </div>
            </div><!-- end item -->

          </div><!-- end carousel-inner -->

          <!-- Controls -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div><!-- end #myCarousel -->

        <!-- start myNavbar -->
        <nav role="navigation" class="navbar navbar-default" id="myNavbar">
            <div class="container">

                <!-- brand and toggle button get grpd for better mobile display -->
                <div class="navbar-header">
                    <!-- toggle button -->
                    <button data-target=#navbar-responsive-collapse type="button" data-toggle="collapse" class="navbar-toggle">
                        <span>Tappity!</span>
                    </button><!-- end toggle button -->

                    <!-- start navbar-brand -->
                    <a href="#" class="navbar-brand">YourLogo</a>
                </div><!-- end navbar-header -->

                <!-- start navbar-responsive-collapse -->
                <div id="navbar-responsive-collapse" class="collapse navbar-collapse">

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Hi</a></li>
                                <li><a href="#">Hi</a></li>
                                <li><a href="#">Hi</a></li>
                            </ul>
                        </li>
                        <li><a href="#">There</a></li>
                        <li><a href="#">Yo</a></li>
                    </ul><!-- navbar-right -->

                </div><!-- end navbar-responsive-collapse -->

            </div><!-- end container -->
        </nav><!-- end #myNavbar -->

        <!-- start intro -->
        <div class="well well-lg" id="intro">
            <div class="container">
                <div class="row">

                    <div class="col-sm-6">
                        <h2>Hey There !!</h2>
                        <p>This is just a lil somethin somethin .. </p>
                    </div>

                    <div class="col-sm-6">
                        <img class="" src="images/groceries2-transparentbg.png">
                    </d
                </div>
            </div><!-- end container -->
        </div><!-- end #intro -->

    </div><!-- end #page -->

这是一个显示我的问题的Bootply：http://www.bootply.com/olXfRYF12a

提前致谢！

Answer 1

将此样式添加到样式表应该可以解决问题：

#myNavbar {
     z-index: 9999;
}

Bootply Link

Answer 2

对于任何对实现此功能感兴趣的人，以下是一个不需要jQuery的示例：

http://jsbin.com/omanut/2/edit?html,css,js,output

以下是相关的JS：

localstorage

页面的主要部分是通过固定导航栏？

2 个答案: