2つのナビゲーションメインナビゲーションは固定トップとサブナビにあります

Question

ブートストラップでウェブページを開いています。メインナビゲーションは固定されたトップポジションです。サブナビゲーションはバナーの下にあります。両方をスクロールするとページの上に移動する必要があります。サブナビゲーションは、メインナビゲーションの下で背景色の変更で停止する必要があります。誰でも私を助けることができますか？ここ

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

 

 
<style type="text/css"> 
 

 
.innernav{ 
 
\t background-color:#FFF; 
 
\t font-family: 'Droid Serif', serif; 
 
    color:#212121; 
 
\t font-size:14px; 
 
\t text-transform:uppercase; 
 
\t 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{ 
 
\t height:430px;} 
 
\t 
 
.inside{ 
 
\t background:url(../images/inside_bg.png) repeat-x; 
 
\t background-position:50% 50%;} 
 
\t 
 
.inside .navbar-nav{ 
 
\t background-color:#FFF; 
 
} 
 
.no-horizontal-padding { 
 
    padding-right: 0 !important; 
 
    padding-left: 0 !important; 
 
} 
 
.affix { 
 
\t top: 0; 
 
\t width: 100%; 
 
\t 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/