Question

基本上我想要实现的是，只要它在滚动时遇到主导航的底部，就会让辅助导航粘在主导航的底部。我还在学习jQuery，而且我已经开始撕掉我的头发了！

编辑：意识到我没有解释到目前为止我到达的地方;该类正被添加到元素中，但不是固定在主标题下面，而是从视口中移出。

如果有人能提供一些帮助/建议，我会非常感激！

外标题高度：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％。您只需要更好地指定类以阻止它被覆盖。

DEMO http://jsfiddle.net/H9Bz3/27/

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

更新：

为确保顶部的高度正确，我会根据outter-header

的元素高度为其指定CSS

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

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

2 个答案: