11523 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [Résolu] Barre de navigation fixe

Bonjour à tous,
J'ai maintes fois réglé le problème de barre de navigation fixe, mais actuellement celle-ci se trouve sous une balises <entete>, et impossible de la fixer Smiley ohwell L'objectif serait que cette barre de navigation soit fixe quand l'entête a été scrollé.
ci-dessous le début du body (qui est suivit d'une balise <container> :
<body id="entete">
<ul class="cb-slideshow">
            <li><span>Image 01</span><div>
              <h1 class="titre_un">
            Bolb oll<br />
            bolb<br />
            boblbo<br />
            boblbo</h1>
              <img src="../LDDC/img/im-1.jpg" alt=""/> </div></li>
            <li><span>Image 02</span><div><h3>test_1</h3></div></li>
            <li><span>Image 03</span><div><h3>test_2</h3></div></li>
            <li><span>Image 04</span><div>
              <h3>Bol bo lb</h3>
  </div></li>
  <li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li>
            <li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li>
</ul>
    <div id="logo"><a href="#menu"><img src="img/lddc_deux.jpg"  alt="" class="logo"/></a><br/><br/></div></div>
    	<div id="menu">
		<ul>
			<li><a href="#entete" class="button">Accueil</a><a href="#img1" class="button">Image 1</a><a href="#img2" class="button">Image 2</a><a href="#img3"class="button">Image 3</a><a href="#img4" class="button">Image 4</a><a href="#img5" class="button">Image 5</a><a href="#img6" class="button">Image 6</a></li>
		</ul>
	</div><!-- #menu -->
<div id="container">

Merci pour votre aide,
Eritou
Bonjour,

C'est l'élément #menu que tu souhaite rendre fixe ?
Quel est le code CSS associé pour l'instant ? Le code JS ?
Habituellement, ce type d'effet se gère avec javascript en ajoutant une classe CSS à l'élément lorsque le scroll dépasse un nombre de pixels définis, et en la supprimant lors du scroll vers le haut.

Ou en est-tu de ton côté ? As-tu la possibilité de publier un lien vers une page en ligne ?
Bonsoir audrasjb,
Merci pour ta réponse Smiley smile Oui, je parle bien de l'élémént #menu
j'ai tenté ton script ce matin, mais la barre de nav (menu) doit rester fixe au delà d'un scroll de 100%, je n'ai donc pas pu paramétrer cela.
Les CSS de la barre menu (nav) sont les suivantes :
#menu {
	width: 100%;
	text-align: center;
	margin: 0px auto 0;
	position: absolute;
	height: 80px;
	top: 100%;
	background-color: #CC9966;
}

#menu ul {
	padding: 0;
	list-style: none;
	margin: 30px 0 0 0;
	font-family: "Trebuchet MS", Arial;
	font-size: 15px;
	text-align: center;
}

#menu ul li {
	display: inline;
	margin-right: 80px;
	text-align: center;
}

#menu ul li a {
	text-decoration: none;
	color: white;
	text-align: center;
}


A savoir que si je mets #menu en position fixed, celui-ci n'apparaît plus Smiley ohwell
Rien est-en ligne pour le moment, mais si tu veux plus d'éléments, let me know,
Merci pour ton aide,
Eritou
dhillig a écrit :
j'ai tenté ton script ce matin, mais la barre de nav (menu) doit rester fixe au delà d'un scroll de 100%, je n'ai donc pas pu paramétrer cela.

Ça, ce n'est pas très compliqué, tu peux récupérer la hauteur de la fenêtre avec JS. Par exemple (avec jQuery, dont il faut implémenter la lib) :

	$(function(){
                var hauteur = $(window).height(); // ici je récup la hauteur de la fenêtre…
		$(window).scroll(function () {
			if ($(this).scrollTop() > hauteur) {
				$('#menu').css({
					'position': 'fixed',
					'top': '0px'
				});
      		         } else {
	  			$('#menu').css({
		  			'position': 'absolute',
		  			'top': '100%'
	  			});
      		          }
   		});
 	});


À ne pas forcément prendre tel quel mais à adapter à ton cas, plus finement, mais dans l'idée, ce n'estpas plus compliqué que ça.
Pas mal, la barre de nav #menu reste fixe mais est masquée par ce qui suit : le container Smiley decu
Le container ne fonctionne qu'en position "absolute".
Y'a t'il un moyen pour que le container passe "en dessous" de la barre de nav ?
A savoir que toute la page est basée sur ScrollTo, donc le container n'est qu'une suite de <div> appelées par cette barre des menus...
Merci pour ton aide,
Eritou
Bonjour audrasjb,
En mettant le #menu DANS la balise container, et un "top': '0%" à ton script, cela fonctionne.
En laissant le "top" à 100%, le #menu n'étant plus DEVANT la balise container mais A L'INTERIEUR, cela fonctionne si on passe par la barre des menus, mais en scrollant, le container s'affiche avant le #menu qui survient donc à 100% du scroll.
Donc affaire résolu ! MERCI BEAUCOUP et bonne journée !
Eritou
Bonjour audrasjb,
En mettant le #menu DANS la balise container, et un "top': '0%" à ton script, cela fonctionne.
En laissant le "top" à 100%, le #menu n'étant plus DEVANT la balise container mais A L'INTERIEUR, cela fonctionne si on passe par la barre des menus, mais en scrollant, le container s'affiche avant le #menu qui survient donc à 100% du scroll.
Donc affaire résolu ! MERCI BEAUCOUP et bonne journée !
Eritou
reBonjour audrasjb,
J'ai l'impression que les fonctions de ScrollTo sont un peu en conflit avec le script. L'effet "ascenseur" fonctionne mais est "perturbé (scroll ralenti et un peu saccadé). Y'a t'il un moyen de "fluidifier" le script ?
Merci pour ton aide,
E.
Hello,

Ravi de t'avoir aidé. Pour les ralentissements, même si je suppose que le script peut-être optimisé (on peut toujours optimiser plus Smiley cligne ), il n'est pas sensé ralentir la navigation de façon vraiment significative (exemple similaire, bloc réseaux sociaux).
Sans page en ligne (ou exemple/extrait), impossible d'en dire plus. Cela dit, il est possible que tu ai un conflit JS (plusieurs bibliothèques appelées pour rien, ou autre). Encore une fois, c'est une prédiction sans grande valeur sans exemple en ligne.
Modifié par audrasjb (09 Jan 2015 - 14:06)
Sujet clos
Aller à