將元素粘貼到滾動上固定元素的底部？

Question

基本上，我要實現的目的是使輔助導航在滾動時遇到主導航的底部時，立即停留在主導航的底部。 我仍在學習jQuery，並且已經開始扯頭發了！

編輯：意識到我到目前為止還沒有解釋我要去的地方； 該類已添加到元素中，但是不是固定在主標頭下方，而是從視口移出。

編輯2： JSFiddle

如果有人可以提供幫助/建議，我將非常感謝！

外部標題高度：160px

標記如下：

HTML

<div class="outer-header" id="header">
    <header>
        ....    
    </header>        
</div>
<div id="page-wrap">
    <div class="upper-content">
        .....
    </div>
    <nav id="secondary_nav">
        ....
    </nav>

CSS

.sticky{
    position: fixed;
    top: 206px; /*top of viewport + height of secondary nav and outer-header*/
}

JS

var stickyNavTop = $('#secondary_nav').offset().top - 160;  

var stickyNav = function(){  
    var scrollTop = $(window).scrollTop();  

    if (scrollTop > stickyNavTop) {   
        $('#secondary_nav').addClass('sticky');  
    } else {  
        $('#secondary_nav').removeClass('sticky');   
    }  
};  

stickyNav();  

$(window).scroll(function() {  
    stickyNav();  
});  

Answer 1

這應該工作：

.sticky{
    position: fixed !important;
    top: 160px;
}

Answer 2

您的代碼在那里是99％。 您只需要更好地指定該類即可阻止其被覆蓋。

演示http://jsfiddle.net/H9Bz3/27/

#secondary_nav.sticky{
    position: fixed;
    top: 160px;
}

更新：

為了確保從頂部開始的高度正確，我將根據outter-header的元素高度為其分配CSS

演示http://jsfiddle.net/H9Bz3/28/

jQuery(document).ready(function($){
    //Sticky
    var stickyNavTop = $('#secondary_nav').offset().top - 160; 
    var topHeight = $('.outer-header').outerHeight();

    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();  

        if (scrollTop >= stickyNavTop) {   
            $('#secondary_nav').css({
                'position': 'fixed',
                'top': topHeight+'px'
            });  
        } else {  
            $('#secondary_nav').css({
                'position': 'relative',
                'top': '0'
            });  
        }  
    };  

    stickyNav();  

    $(window).scroll(function() {  
        stickyNav();  
    });
});