固定顶部的两个导航主导航和粘性子导航

Question

我正在使用 bootstrap 制作网页。主导航位于固定的顶部位置。子导航位于横幅下方。滚动时，两者都应位于页面顶部，子导航应停止在主导航下方，并更改背景颜色。谁能帮帮我？

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');


<style type="text/css">

.innernav{
	background-color:#FFF;
	font-family: 'Droid Serif', serif;
    color:#212121;
	font-size:14px;
	text-transform:uppercase;
	margin-bottom:20px;
}
.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
    padding-left: 0;
    padding-right: 0;
}
.innernav .navbar-inner > .container {text-align:center; }

.inner-banner{
	height:430px;}
	
.inside{
	background:url(../images/inside_bg.png) repeat-x;
	background-position:50% 50%;}
	
.inside .navbar-nav{
	background-color:#FFF;
}
.no-horizontal-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.affix {
	top: 0;
	width: 100%;
	background-color: #d52027;
}

<!-- star main navbar -->
<div class="container innernav">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container text-center">
      <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="images/logo-inner.jpg"></a> </div>
      <div id="navbar" class="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">our products</a></li>
          <li><a href="#">about tea</a></li>
          <li><a href="#">media</a></li>
          <li><a href="#">contact us</a></li>
          <li><a href="#">locater</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<!-- end main navbar -->
</div>
<section id="banner">
  <div class="container-fluid">
  <!--start banner ares-->
    <div class="row"> 
     <div class="inner-banner">
         <!--**********banner area************-->
      </div>
    </div>
    <!--end banner ares--> 
  </div>
</section>

<section id="main-content"> 
<!--start inner page navi-->
  <div class="container-fluid no-horizontal-padding">
    <div class="row">
      <div class="col-md-12">
        <nav class="navbar navbar-default inside" data-spy="affix" data-offset-top="400">
          <div class="container text-center">
            <div id="navbar" class="navbar-collapse">
              <ul class="nav navbar-nav">
                <li><a href="#">Overview</a></li>
                <li><a href="#">Our Story</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Global presence</a></li>
                <li><a href="#">Certification</a></li>
                <li><a href="#"> Our Facilities</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>
  <!--end inner page navi-->
   <div class="container-fluid">
   
    <!--******body content*****-->
   
   </div>
  </section>

这是我的代码 https://jsfiddle.net/prasha/zd6yecgm/

Answer 1

一些改变 HTML

<nav id="navigation" class="" data-spy="affix" data-offset-top="400">
          <div class="container text-center">
            <div id="navbar" class="navbar-collapse">
              <ul class="nav navbar-nav">
                <li><a href="#">Overview</a></li>
                <li><a href="#">Our Story</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Global presence</a></li>
                <li><a href="#">Certification</a></li>
                <li><a href="#"> Our Facilities</a></li>
              </ul>
            </div>
          </div>
        </nav>

CSS

.affix {
    top: 50px;
    width: 100%;
    background-color: #d52027;
}

https://jsfiddle.net/zd6yecgm/1/