[Résolu]Element qui apparait quand on scroll down ?

Bonjour

Voila j'ai une nav horizontale et je souhaite faire apparaître (avec une transition) le logo du site au centre de la Nav (il arrive du haut de la page et pousse les autres li) à 435px de hauteur.

J'ai déjà ma nav qui se fixe en haut de page grace à un js et j'ai déjà mis une transition(pour le moment en hover) pour que le logo apparaisse disparaisse. Le problème est que je ne sais pas comment activer une transition quand on scroll.(edit j'ai trouvé)

Le deuxième problème est que la transition n'est vraiment pas smooth à la sortit de l'effet :s quand je scroll up le logo part, mais les li de droite ce collent à c'elle de gauche puis elles se déplacent toute vers la droite pour se centrer >< alors que je souhaite que les li de droite aillent à gauche et même temps les li de gauches aillent à droite pour se centrer directement.(edit 2 j'ai trouvé, ne pas metre de max-width en % mais en px et ca marche super)

L'effet que je veux faire est le même que sur la page d'accueil de https://www.lafraise.com/

Si vous avez une idée de comment faire ça, ça m'aiderais beaucoup

Merci dans tout les cas

Edit: c'est bon tout marche je laisse les codes si ça intéresse qqn car j'ai vraiment galéré à faire cet effet

		<div id="navigation">
			<nav>
				<ul>
					<li class="navlink"><a id="navactuel" href="#">Accueil</a></li>
					<li class="navlink"><a href="#">Carte & Menu</a></li>
					<li class="navlink"><a href="#">Nos restaurants</a></li>
					
					<li id="logonav"><a href="#"><img src="css/images/logo_nav.png" alt="logo crêpes nation"></a></li> <!-- Le logo à animer -->
					<li class="navlink"><a href="#">Recettes</a></li>
					<li class="navlink"><a href="#">Emplois</a></li>
					<li class="navlink"><a href="#">App</a></li>
					<li class="navlink"><a href="#">Contact</a></li>
					<li class="navlink"><a href="#">Le projet</a></li>
				</ul>
			</nav>
		</div><!-- END DIV Navigation -->

/* ============================= NAV ============================= */
nav{ 
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #BE1E2D;
	border-bottom: 3px solid #FFD540;
	height: 40px;
	position: absolute;
	width: 100%;
}
nav ul{
	margin: 0;
	padding: 0;
	display: inline-block;	
	list-style: none;
	margin-top: 5px;
}
nav li{
	font-family: 'mohavesemibold';
	font-size: 1.28em;
	float: left;
}
.navlink a{

	color:#FFD540; 
	padding: 5px 10px;
	text-decoration: none;
}
.navlink a:hover,.navlink a:focus,#navactuel {
	color:#BE1E2D;
	background-color: #FFD540;
}
#logonav{
  position: relative;
  max-width: 0;
  top: -800px;
  transition:all 0.5s ease 0s;
}
#logonav.logoposition{
  position: relative;
  max-width:100%;
  top: -37px;
}
.f-nav{
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
} /* this make our menu fixed*/ 

Pour fixer la nav

jQuery("document").ready(function($){
    
    var nav = $('#navigation');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 450) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});

Pour déclencher l'effet sur le scroll

$(function(){
		 var logoApear = 450;
		  $(window).scroll(function() {
		    var scroll = getCurrentScroll();
		      if ( scroll >= logoApear ) {
		           $('#logonav').addClass('logoposition');
		        }
		        else {
		            $('#logonav').removeClass('logoposition');
		        }
		  });
		function getCurrentScroll() {
		    return window.pageYOffset;
		    }
		});

Modifié par vin (08 Jun 2014 - 12:04)