Sticky Navbar change text/bg color when scrolled to top, .addclass is not working?

Question

I am completely new to jQuery so please bear with me. So what I am trying to do with my site is have the nav bar "stick to the top" when the user scrolls down. That is already working.

However, I want to accomplish something more. I want the nav bar to change color and take up the full width of the container when it is "sticky".

Somehow I cannot get it to work with .addClass. I tried many things such as removing the "." before the class. I am sure I am doing something wrong. Please enlighten my mind!

$(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

First of all the addClass method does not need the "." in place. Secondly, you're referencing $('.fixed nav ul') which does not exist and it should be $('.fixed_nav ul'). I suggest using variables, but with the code you currently have the fix is:

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