11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Créer un menu qui apparaît avec le scroll

Bonjour!

Veuillez m'excuser si ce problème a déjà été traité.
J'aimerai réalisée un menu comme celui-ci : http://www.top-secret.be/

Enfaite, j'aimerais faire disparaître le premier header quand on descent avec le scroll et faire apparaître le deuxième header et le garder fixe. voici mon code :

<body>
        
        <div class="camp-header">
        
	<!-- Social Links -->
	<nav class="social-nav">
	<ul>
	<li><a href="#"><img src="images/icon-facebook.png" /></a></li>
	<li><a href="#"><img src="images/icon-twitter.png" /></a></li>
	<li><a href="#"><img src="images/icon-google.png" /></a></li>
	<li><a href="#"><img src="images/icon-linkedin.png" /></a></li>
	<li><a href="#"><img src="images/icon-pinterest.png" /></a></li>
        <li><a href="#"><img src="images/fr.png" /></a></li>
	<li><a href="#"><img src="images/en.png" /></a></li>
	<li><a href="#"><img src="images/pt.png" /></a></li>
	</ul>
	</nav>
        
        <!-- Site Logo -->
	<div id="logo"><img src="images/Official_logo_createev_digital_noir.png"/></div>
	
	<!-- Main Navigation -->
	<nav class="main-nav">
	<ul>
	<li><a href="index.html" class="active">HOME</a></li>
	<li><a href="#about">STUDIO</a></li>
	<li><a href="#services">SERVICES</a></li>
        <li><a href="projets.html">PROJETS</a></li>
        <li><a href="#jobs">JOBS</a></li>
	<li><a href="#contact">CONTACT</a></li>
	</ul>
	</nav>
	</div>
        
        <div class="cbp-af-header">
        <!-- Social Links -->
	<nav class="social-nav">
	<ul>
	<li><a href="#"><img src="images/icon-facebook.png" /></a></li>
	<li><a href="#"><img src="images/icon-twitter.png" /></a></li>
	<li><a href="#"><img src="images/icon-google.png" /></a></li>
	<li><a href="#"><img src="images/icon-linkedin.png" /></a></li>
	<li><a href="#"><img src="images/icon-pinterest.png" /></a></li>
        <li><a href="#"><img src="images/fr.png" /></a></li>
	<li><a href="#"><img src="images/en.png" /></a></li>
	<li><a href="#"><img src="images/pt.png" /></a></li>
	</ul>
	</nav>
        
        <!-- Site Logo -->
	<div id="logo"><img src="images/Official_logo_createev_digital_noir.png"/></div>
	
	<!-- Main Navigation -->
	<nav class="main-nav">
	<ul>
	<li><a href="index.html" class="active">HOME</a></li>
	<li><a href="#about">STUDIO</a></li>
	<li><a href="#services">SERVICES</a></li>
        <li><a href="projets.html">PROJETS</a></li>
        <li><a href="#jobs">JOBS</a></li>
	<li><a href="#contact">CONTACT</a></li>
	</ul>
	</nav>
	</div>


Pouvez-vous m'aider?? Merci d'avance pour votre aide

Edit : Doublons supprimée Smiley cligne
Modifié par ngpatrick (24 Feb 2014 - 23:00)
Hello,

Voilà un petit exemple qui fonctionne avec jQuery (il faut donc évidemment intégrer la lib au préalable). Bien sûr, tout ceci reste très rudimentaire, mais le principe est là. A toi de l'adapter Smiley smile

En gros :

 $('.navigation2').hide();  // d'abord, on masque le deuxième menu de navigation, qui porte la classe "navigation2"
 var hauteur = XXX; // XXX, c'est le nombre de pixels à partir duquel on déclenche le tout
 $(function(){
   $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction
      if ($(this).scrollTop() > hauteur) { //si on a défile de plus de XXX (variable "hauteur) pixels du haut vers le bas
            $('.navigation1').hide(); // On masque le 1
            $('.navigation2').show(); // On affiche le 2
      } else {
            $('.navigation2').hide(); // "et vice et versa" (© Les inconnus, 1990 ^^)
            $('.navigation1').show();
      }
   });
 });

Modifié par audrasjb (25 Feb 2014 - 00:08)
Merci beaucoup pour ta réponse. Je viens de trouver la solution:

<script type="text/javascript" charset="utf-8">
			$(function() {
  				$('.cbp-af-header').hide();
			});
		 </script>
		
        <script type="text/javascript" charset="utf-8">
			$(window).scroll(function(){  
        		posScroll = $(document).scrollTop();  
        		if(posScroll >=69)  
            $('.cbp-af-header').slideDown(450);  
        	else  
            $('.cbp-af-header').slideUp(450);  
    		});  
		</script>
Salut,

Désolé de revenir sur ton fil de discussion alors qu'il est marqué comme résolu, mais je crois que tu récupère un bout de code sans savoir comment il fonctionne là. Sinon, tu n'aurais pas séparé le code JS en deux balises <script>… ce qui est inutile et ridicule.

Ça reste tout de même plus intéressant pour toi d'apprendre un peu comment ça marche, non ? C'est plus de boulot mais au moins tu seras capable de le refaire par toi-même la prochaine fois.s
Sujet clos
Aller à