粘滯導航隱藏，直到滾動頁面

Question

我遇到了一個問題，我在同一頁面上有兩個導航菜單。我希望分開顯示哪一個涉及粘滯導航。我希望這個隱藏，直到我向下滾動，看不到其他的出現。有沒有辦法讓這項工作？

<!-- Start Sticky Navigation --> 
     <nav id="mainnav"> 
      <div class="container"> 
       <div class="row"> 
        <div class="span4"> 
         <a href="#" class="logo"><img src="img/logo2.png" alt="LOGO"></a> 
        </div> 
        <div class="span8"> 
         <ul id="fluid-nav" class="fluid-navigation visible-desktop"> 
          <li class="current"><a href="#home">Top</a></li> 
          <li><a href="#productoverview">Overview</a></li> 
          <li><a href="#imagegallery">Gallery</a></li> 
          <li><a href="#nocomp">No Compromises</a></li> 
          <li><a href="#selectbuy"><button class="btnbuy small">Select & Buy</button></a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </nav> 
     <!-- End Sticky Navigation --> 

CSS

nav#mainnav { 
width: 100%; 
height: 50px; 
background-color: #cb0000; 
overflow: hidden; 
position: relative; 
z-index: 999; 
} 

Answer 1

我沒有真正得到什麼ü什麼，但是這是我想出了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="main"> 
</div> 

<div id="float"> 
<div class="m">menu1</div> 
<div class="m">menu2</div> 
<div class="m">menu3</div> 
<div class="m">menu4</div> 
</div> 
<div class="foot"> 
<div class="m">menu1</div> 
<div class="m">menu2</div> 
<div class="m">menu3</div> 
<div class="m">menu4</div> 
</div> 
<div class="main"> 
</div> 

</div> 
</div> 

這裏是CSS

<style type="text/css"> 
#float{ 
    background: #09C; 
    position:absolute; 
    right:60px; 
    top:20px; 
    width:90%; 
    padding:10px; 
    border-radius: 6px; 
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43); 
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43); 
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43); 
} 
.m{ 
    display: inline-block; 
} 
.float_content_head{ 
    padding:10px; 
    border-bottom: 1px solid #efefef; 
    text-align:center; 
} 
.float_content{ 
    padding-top:10px; 
} 
.main{ 

    height: 800px; 
    margin: 0 auto; 
    border:1px solid #efefef; 
    padding: 10px; 
    background:#ccc; 
} 
.foot{ 
    background:#09F; 
    width: 90%; 
    margin: 0 auto; 
    border:1px solid #efefef; 
    padding: 10px; 
    border-radius: 6px; 
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43); 
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43); 
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43); 

} 
#box p{ 
    margin:0; 
    padding:0; 
} 
</style> 

的全部細節

和.js

<script type="text/javascript"> 
$(document).ready(function() { 
var starting_position = $('#float').offset(); 

var top_padding = 20; // Distance from top while scrolling 
var bottom_limit = $('.foot').offset(); 
var box_height = $('#float').height() + 15; // Distance from top 
$(window).scroll(function(){ 
var top_window = $(window).scrollTop(); 
if (top_window > starting_position.top && top_window < bottom_limit.top - box_height){ 
$('#float').stop().animate({top: top_window - starting_position.top + top_padding}, 0); //0 makes it sticky 
} else if (top_window > bottom_limit.top - starting_position.top - box_height){ 
$('#float').stop().animate({top: bottom_limit.top - starting_position.top - box_height }, 0); 
} else { $('#float').stop().animate({top: 10 }, 400);   
} 
}); 
}); 
</script> 

和小提琴Here