将元素粘贴到滚动上固定元素的底部？

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();  
    });
});