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

基本上，我试图实现的是让一个辅助导航在它与滚动条上的主导航底部相遇时，立即粘到主导航的底部。我还在用jQuery学习，我已经开始发疯了

编辑：意识到我没有解释到目前为止我到哪里去了；该类被添加到元素中，但是它没有固定在主标题下，而是从视口中向上移动

编辑2：

如果有人能提供一些帮助/建议，我将不胜感激

外部收割台高度：160px

标记如下：

HTML

JS

这应该起作用：

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

---

你的代码是99%。您只需要更好地指定类，以防止它被覆盖

演示

更新：

为了确保顶部的高度正确，我将根据

outter header的元素高度将其指定为CSS

演示

如果你能做一把小提琴，我也许能help@Vector是的，当然，我现在就开始：）@Vector我已经为你添加了JSFiddle:）谢谢你花时间帮忙，我把导航移到了它的包装外面，完全定位了它，它成功了！：）现在我可以减压了，哈哈。
.sticky{
    position: fixed;
    top: 206px; /*top of viewport + height of secondary nav and outer-header*/
}

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

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

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

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