18041 sujets

Questions générales et questions de débutants

[Résolu] Menu javascript fixe

Bonjour,

Je suis en train de développer un site web pour une activité de photographe. Voilà le site: lacouleurdurendezvous.fr

J'ai mis en place un menu horizontal en haut avec un z-index qui permet de faire passer le content de la page en dessous quant on scroll down.

Pour bien qu'il se détache de la page un fond blanc vient se mettre entre le texte du menu et la page. J'ai fait ça en JS, en bidouillant un peu avec des tutos.

Mon problème est que j'aimerais que ce rectangle blanc soit dépendant du menu. quant on redimensionne la fenêtre le fond n'est pas toujours ajusté à la bonne taille. Je voudrais qu'il suive la taille du menu.
Pour que ce rectangle blanc soit dépendant du menu, pourquoi ne pas simplement utiliser le menu Smiley langue
Plutôt que d'ajouter un élément qui vient se placer derrière un autre, agit simplement sur le background (et la propriété box-shadow si tu veux un effet parfaitement similaire) de ton menu.
Et utilise des transitions css pour avoir un effet fondu.

Par exemple:
<ul id="text">
   <li class="menu"><a href="histoire.html"> Notre histoire</a></li>
   <li class="menu"><a href="telechargements.html">Télécharger vos photos</a></li>
   <li class="menu"><a class="modalbox" href="#inline">Contactez Nous</a></li>
</ul>
#text {
    background:transparent;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s;
}

#text.scroll {
   background:#fff;
   box-shadow:0 0 5px rgba(0,0,0,0.3);
}
window.onscroll=function() {
   document.getElementById('text').className=document.body.scrollTop>50 ? 'scroll' : '';
}


Au passage, tous tes <li> ont le même id, c'est pas possible ça ! (j'ai corrigé cela dans mon exemple)
Modifié par juliendargelos (01 Jul 2014 - 21:09)
@juliendargelos

Pourquoi je dois mettre class et pas id ? Avec class je n'arrive pas à mettre mes liens en ligne, ils se placent verticalement Smiley decu

Je n'arrive pas à faire marcher l'animation, j'ai bien le premier bandeau (si je lui met une couleur) mais pas le bandeau blanc quand je scroll... Quand je scroll, rien ne se passe... j'ai pourtant l'impression d'avoir fait les bons changements.

-j'ai rajouté les deux css #text et #text.scroll

-le code JS je l'ai mis en direct et en lien sur une autre page mais j'ai toujours rien qui s'anime quand je scroll.

coté positif, le menu est bien comme je voudrais qu'il soit, ne manque plus que l'animation !

Voilà mes codes:

le JS: 

<script src="Ressources/testhead.js"type="text/javascript"></script>
<script>
window.onscroll=function() {
   document.getElementById('text').className=window.scrollTop>50 ? 'scroll' : '';
}</script>


le css:

#header {
	font-family: Helvetica, Arial, sans-serif;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 8%;
	font-size: 1.2em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	z-index: 400;
}

#menu {
	position:relative;
	top: 0px;
	list-style: none;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 1em;
	margin-bottom: 2em;
	list-style: none;
	cursor: pointer;
	vertical-align:middle;
	
	
}

#text {
	font-family:Helvetica, Arial, sans-serif;
	position:relative;
	top: 0px;
	width:100%;
	margin-left: auto;
  	margin-right: auto;
	z-index: 450;
	vertical-align:middle;
	list-style: none;
	margin-top:0.8em;

	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	background-color:rgba(51,0,0,1)
}

.scroll {
	z-index: 449;
   background:#fff;
   box-shadow:0 0 5px rgba(0,0,0,0.3);
}
tiphaine a écrit :
Pourquoi je dois mettre class et pas id ? Avec class je n'arrive pas à mettre mes liens en ligne, ils se placent verticalement
Je doute que ceci soit dû à l'utilisation de l'attribut id plutôt que l'attribut class, cela doit venir de tes règles css. En tout cas tu ne peux pas mettre plusieurs éléments avec le même id ! L'attribut id défini (attention les yeux) l'identifiant d'un élément, et cet identifiant vaut pour un élément unique. L'attribut class permet lui de définir l'appartenance à une classe de plusieurs éléments.

Je vais t'écrire le code complet, adapte-le tel-quel à ton site (j'ai récupéré tes règles css).
CSS:

#text {
	font-family:Helvetica, Arial, sans-serif;
	background-color:transperent;
	position:relative;
	top: 0px;
	width:100%;
	margin-left: auto;
  	margin-right: auto;
	z-index: 450;
	display:inline-block;
	vertical-align:middle;
	list-style: none;
	margin-top:0.8em;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s;
}

#text.scroll {
	background:#fff;
	box-shadow:0 0 5px rgba(0,0,0,0.3);
}

.menu {
	bottom: 0px;
	display:inline-block;
	list-style: none;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 1em;
	margin-bottom: 2em;
	cursor: pointer;
	vertical-align:middle;
	z-index: 450;
}


<div id="header"> 
	<div>
		<ul id="text">
			<li class="menu"><a href="histoire.html"> Notre histoire</a></li>
			<li class="menu"><a href="telechargements.html">Télécharger vos photos</a></li>
			<li class="menu"><a class="modalbox" href="#inline">Contactez Nous</a></li>
		</ul>
	</div>          
</div>


Ceci plus la petite fonction js que je t'ai écrite, normalement il n'y a pas de raison que ça ne fonctionne pas. Remplace bien tout ton header par le mien, et remplace bien toutes les règles css concernées par les miennes.
Pour que les items de ta liste ne se placent pas verticalement il suffit de mettre la valeur inline-block à la propriété display.
Modifié par juliendargelos (01 Jul 2014 - 20:21)
Je suis arrivé à retrouver une mise en pge mais toujours pas d'animation....

Du coup j'ai mis en ligne un fichier html comprenant le JS et le CSS pour que tu puisse voir @juliendargelos

Voici l'adresse:
http://www.lacouleurdurendezvous.fr/test


Je sens que je ne suis pas loin, mais il y a un truc qui cloche dans mon code Smiley fache
Ça ne marche pas du coup je suis revenu à window.onscroll... Smiley smile

J'ai ajouté ça, pour vérifier que tout marchait bien et je n'ai pas d'erreurs sur firebug...

 console.log('working');


Je ne comprend pas.
J'ai testé moi-même avec document.body.scrollTop et ça a fonctionné
La fonction corrigée:
window.onscroll=function() {
   document.getElementById('text').className=document.body.scrollTop>50 ? 'scroll' : '';
}

Modifié par juliendargelos (01 Jul 2014 - 22:09)
Au final un mec de stackworkflow m'a conseillé ça: 
window.onscroll=function() {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    document.getElementById('text').className=top>50 ? 'scroll' : '';
}


Et ça marche bien !

Merci encore @juliendargelos pour le temps passé et l'aide que tu m'a apportée !
Modifié par tiphaine (02 Jul 2014 - 13:24)
Sujet clos
Aller à