JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<div class="toto">0</div>

<nav class="grid_12">
	<ul>
        <li><a id="aa" href="#"><img src="http://afrique.kongotimes.info/themes/one/img/footer_icon_home.gif" style="height:22px;" /></a></li>
		<li><a id="bb" href="#" class="promo">Promotions</a></li>
		<li><a id="cc" href="#">Inspirations</a></li>
		<li><a id="dd" href="#">Pièces </a></li>
		<li><a id="ee" href="#">Réalisation</a></li>
        <li><a id="ff" href="#"><img src="http://www.mulhaupt.fr/medias/images/icone_panier.png" style="height:22px;" />Mon Panier(0)</a></li>		
	</ul>
</nav>

<section></section>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    font-size: 11px;
}
nav.fixe {
    position: fixed;
    top: 0;
}
ul {
    display: block;
    list-style: none;
    width: 480px;
    height: 30px;
    background-color: #222;
    overflow: hidden;
}
li {
    float: left;
    line-height: 30px;
}
li a {
    color: #eee;
    line-height: 1;
    padding: 0 25px;
}
header {
    height: 50px;
}
.toto {
    position: fixed;
    bottom: 0;
    left: 0;
}
section {
    height: 1000px;
}

JavaScript

var scrollfunction = $(window).scroll(function(){
    var scrollTop = $(window).scrollTop()
    var $nav = $('nav')
    
    $('.toto').text(scrollTop)

    if (scrollTop > 50) {
        if (!$nav.hasClass('fixe')) $('nav ul li a')
            .stop()
            .animate({paddingLeft: '12px',paddingRight:'12px'}, 400);
		$nav.addClass("fixe");
    }
	else {
	    if ($nav.hasClass('fixe')) $('nav ul li a')
            .stop()
            .animate({paddingLeft: '25px',paddingRight:'25px'}, 400);
	    $nav.removeClass("fixe");
    }  
});