html - 粘性导航隐藏，直到向下滚动页面

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>

和 fiddle Here