Slide down navigation with list items moving

I have a navigation that slides down in a way that background color slides down and the list items fade in, but are not moving from the top downwards and that is what i would like to achieve.

Must be simple by adding a top value with addClass/removeClass, but can't seem it to work within the javascript.

Note: .nav-toggle is the hamburger icon which is the trigger that works fine.

Hope someone can help me.

--> Fiddle

Javascript:

// Navigation //

$(function() {
$('.nav-toggle').click(function() {
    event.preventDefault();
    $('nav ul.right-nav').slideFadeToggle(300);
    $('.nav-toggle').toggleClass('is-active');
})
});

$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
    $('nav ul.right-nav').hide();
    $('.nav-toggle').removeClass('is-active');
}
});

$.fn.slideFadeToggle  = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed,  easing, callback);
}; 

Html:

<header>
<nav>
    <div class="mobile-nav">
        <div class="nav-toggle"><i class="nav-icon"></i></div>
    </div>
    <ul class="left-nav">   
        <li class="home"><a href="#">Pixelation</a></li>    
    </ul>
    <ul class="right-nav">  
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>

via Chebli Mohamed