javascript - 粘性导航栏在滚动到顶部时更改文本/背景颜色，.addclass 不起作用？

Question

我是 jQuery 的新手，所以请多多包涵。所以我想对我的网站做的是当用户向下滚动时让导航栏“坚持到顶部”。那已经在起作用了。

但是，我想完成更多的事情。我希望导航栏在“粘性”时改变颜色并占据容器的整个宽度。

不知何故我无法让它与 .addClass 一起工作。我尝试了很多事情，例如删除“。”上课前。我确定我做错了什么。请赐教!

$(function() {

var fixed_nav_scroll_top = $('.fixed_nav').offset().top;

var fixed_nav = function(){
    var scroll_top = $(window).scrollTop();
    var $ul = $('.fixed_nav ul').width()+'px';
    if (scroll_top > fixed_nav_scroll_top) {
        $('.fixed_nav').css({ 'position': 'fixed', 'left':0, 'top':0});
        $('.fixed_nav ul').css({'width':$ul, 'display':'block', 'text-align':'center'});
        $('.fixed nav ul').addClass('.full_bar ul');
    } else {
        $('.fixed_nav').css({ 'position': 'relative' });
        $('.fixed nav ul').removeClass('.full_bar ul');
    }  

};

fixed_nav();

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

});


.fixed_nav_wrapper {
width:710px; 
margin:0 auto; 
}

.fixed_nav { 
width:100%; 
height:50px; 
margin: -5px auto 0 auto; 
background-color:transparent;
z-index:1000;
}

.fixed_nav ul { 
display:block; 
margin:0 auto; 
padding:5px;
list-style-type:none;  
}

.fixed_nav ul li { 
display:inline;
margin:0 auto; 
padding:0;
}

.fixed_nav ul li a { 
display:block; 
float:left; 
margin:0 25px 0 25px; 
padding:0 5px 0 4px; 
outline:5px solid rgba(235,235,235,1);
outline-offset:-4px;
font-size: 2rem;
color:rgba(235,235,235,1);
font-family: Inversionz, sans-serif;
letter-spacing:-0.25rem;
}

.fixed_nav ul li a:hover { 
color:rgba(255,255,255,1) !important;
-webkit-box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px  13px 0px rgba(255, 255, 255, 1);
-moz-box-shadow:    0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1);
box-shadow:         0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1); 
 }

/*---------*/

.full_bar { 
width:100%; 
height:50px; 
margin: -5px auto 0 auto; 
background:black !important;
z-index:1000;
}

.full_bar ul { 
display:block; 
margin:0 auto; 
padding:500px;
list-style-type:none;  
}

.full_bar ul li { 
display:inline;
margin:0 auto; 
padding:0;
}

.full_bar ul li a { 
display:block; 
float:left; 
margin:0 25px 0 25px; 
padding:0 5px 0 4px; 
outline:5px solid rgba(135,135,235,1);
outline-offset:-4px;
font-size: 2rem;
color:rgba(135,235,235,1);
font-family: Inversionz, sans-serif;
letter-spacing:-0.25rem;
}

.full_bar ul li a:hover { 
color:rgba(155,255,255,1) !important;
-webkit-box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1);
-moz-box-shadow:    0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1);
box-shadow:         0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1); 
 }



<div class="fixed_nav_wrapper">
    <nav class="fixed_nav">
            <ul>
                <li><a href="#" class="current">home</a></li>
                <li><a href="#">me</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">work</a></li>
                <li><a href="#">contact</a></li>
            </ul>
    </nav>
</div>

Answer 1

首先，addClass 方法不需要“.”。到位。其次，您引用的 $('.fixed_nav ul') 不存在，它应该是 $('.fixed_nav ul')。我建议使用变量，但使用您当前拥有的代码，解决方法是:

var fixed_nav = function(){
    var scroll_top = $(window).scrollTop();
    var $ul = $('.fixed_nav ul').width()+'px';
    if (scroll_top > fixed_nav_scroll_top) {
        $('.fixed_nav').css({ 'position': 'fixed', 'left':0, 'top':0});
        $('.fixed_nav ul').css({'width':$ul, 'display':'block', 'text-align':'center'});
        $('.fixed_nav ul').addClass('full_bar ul');
    } else {
        $('.fixed_nav').css({ 'position': 'relative' });
        $('.fixed_nav ul').removeClass('full_bar ul');
    }  
};