[Résolu] Probleme Sticky Nav, Header fixed et ses deux div

Bonjour je suis entrain d'essayer de faire un site et j'aurais besoin de votre aide.

En haut du site web se trouve un header fixed avec deux div, une pour le titre et une pour le menu.

Tout d'abord, voici mon code html:

<div class="top_header">
          <h1 class="titre">Titre du site</h1>
          <p class="nav">Ici le menu de navigation...</p>
 </div>

Le CSS:

.top_header {
	background-color: 				#fff;
	height: 80px;
	width: 100%;
}

.top_header.fixed {
	background-color: 				#f2f2f2;
	position: fixed;
	top:0;
	z-index: 1000;
	width: 100%;
}
.titre {
	float:	left;
	width: 	33%
}
.nav {
	float:	left;
	width: 60%;
}

Et pour finir le js:

$(window).scroll(function (event) {

    var y = $(this).scrollTop(); // On récupérer la valeur du scroll vertical
 
    if (y >= 40) {
      $('.top_header').addClass('fixed');
    } else {
      // sinon, on l'enlève
      $('.top_header').removeClass('fixed');
    }
  });

Mon problème est le suivant: quand je scroll vers le bas, le titre du site s'affiche mais pas la barre de navigation. Est-ce quelqu'un pourrait m'expliquer comment résoudre mon problème ?

Merci par avance de votre aide et bonne journée.
Modifié par Damingo (09 Mar 2017 - 11:08)

Bonjour,

Etrange que vous disiez celà, je ne constate pas du tout que le menu disparaisse au scroll. En l'état votre script fonctionne tel que désiré.

Dans ce pen, je me suis permis de modifier la valeur de y (en JS) remplaçant la condition par if ( y > 0...) [qui signifie tout simplement "en cas de scroll"] évitant ainsi le désagréable saut de cabris du header.

Bonjour !

Merci de ta réponse Greg_Lumiere. J'ai modifié le js comme tu l'as fait aucun changement de mon coté. Désolé de ne pas avoir répondu plus vite, j'étais très occupé !

Voici deux screenshots pour mieux illustrer mon problème:

Le header quand je ne scroll pas (tout est ok tout s'affiche)
http://imgur.com/a/56e5E

Le header quand je scroll
http://imgur.com/a/ts1pY (le menu ne s'affiche plus).

Je n'ai pas encore trouvé de solution !

re,

Le problème doit se situer à l'endroit même où se trouve la vérité, ailleurs.

Sur le pen, constatez-vous comme moi qu'en reprenant strictement votre code, la fonction fonctionne ?

En l'état rien n'empêche son fonctionnement. Avez-vous remarqué que j'utilise Jquery 3.1.1 ? Même si j'ai des doutes, peut-être utilisez-vous une autre version de JQ qui expliquerait cet écart.

Sinon il vous faudra mettre un petit peu plus de code à notre disposition. Il y aurait-il une url accessible en vue de constater votre problème ?

Je viens de résoudre le problème, le site étant sur Wordpress le menu était caché par la barre d'outils de WP.

Je marque le sujet comme résolu.

Je te remercie pour ton aide Greg_Lumiere cependant ! Bonne journée à toi.
Modifié par Damingo (13 Mar 2017 - 10:42)