11521 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]Problème de menu fixe qui cache une partie de mes ancres

Bonjour
je suis en train de créer un site web, et j'ai un petit soucis. J'ai un menu fixe, qui contient des liens vers des ancres (site one-page). Le premier problème que j'ai rencontré, c'est que lorsque je cliquais sur ces ancres, le menu cachait une partie du contenu de mon ancre (notamment le titre et le début). Pour contrer ça, j'ai trouvé une solution sur ce forum qui me disait d'intégrer ce script : 
$('nav a').click( function() {
		var page = $(this).attr('href'); 
		var speed = 750; // gérer la vitesse de défliement
        
        // Ici on retranche la hauteur du bandeau
		$('html, body').animate( { scrollTop: $(page).offset().top - 110 }, speed );
		return false;
	});

Donc lorsque je fais ça, si je pars du haut de la page, c'est niquel, mais si par exemple, je descend à la 3ème section (3ème ancre) et que je clique sur la 2ème pour remonter, j'obtiens une marge blanche en haut de mon ancre (correspondant au 110 mis dans le script).
Comment faire pour enlever cette marge lorsque l'on remonte svp ?

Merci par avance Smiley smile
Modifié par cobra26 (14 Mar 2016 - 09:34)
mais je pense que ça vient vraiment du js car quand je l'enlève, mise à part que ça cache une partie, sinon ça marche bien
cobra26 a écrit :
je t'envoi mon site en mp

C'est pas très pratique pour les p'tits copains qui voudraient aussi aider !

Bon, ton problème vient de ton sticky menu, qui tu l'auras peut-être vu, n'est pas très bien géré si tu descends doucement, et c'est en même temps ce qui provoque ton décalage.

L'explication, c'est que quand tu passes la hauteur requise pour "coller" ton menu, ce dernier sort du flux et fait remonter tout ce qui est en dessous de lui, ce qui implique que le $('#portfolio').offset().top (par exemple) ne te donne pas la même valeur si tu es en haut de ton site ou si tu es en bas (alors qu'il devrait) !

Solution :
- Coller ta classe fixed sur ton header (plutôt que sur ton menu)
- Et modifier le CSS en conséquence pour ton sticky menu (.fixed #menu)
- Et ajouter une marge haute à ta div main quand le header à la classe fixed :
.fixed+#main {
  position:relative;
  top: 78px; /* Hauteur de ton menu, si je n'm'abuse */
}

Ça a l'air de fonctionner...
Modifié par SolidSnake (09 Mar 2016 - 15:14)
Donc je suis pas sure d'avoir compris...

Il faut que je passe le header complet en position fixed et que tout ce que j'ai mis dans le .fixed je le mets dans le .fixed#menu c'est tout ?
Non, ce n'est pas le header qui est en fixed, mais c'est lui qui prend la classe fixed, ceci étant fait pour pouvoir cibler d'une part le menu :
.fixed #menu {
    position: fixed;
    z-index: 100;
    top: 0;
}

Et d'autre part la div#main qui suit :
.fixed+#main {
  position:relative;
  top: 78px;
}
Bonjour,

Je t'ai mis exactement le CSS qu'il te fallait mettre (ou remplacer), il manque juste la modification du bout de JS qui va ajouter la classe fixed sur le header et pas sur le #menu.
Alors teste déjà ça...
Oui j'ai modifié le CSS ainsi que le js et effectivement ça fonctionne. Mais ce que je ne comprends pas c'est pourquoi mon code de départ ne fonctionnait pas
Cf. mon troinième message :
SolidSnake a écrit :
L'explication, c'est que quand tu passes la hauteur requise pour "coller" ton menu, ce dernier sort du flux et fait remonter tout ce qui est en dessous de lui, ce qui implique que le $('#portfolio').offset().top (par exemple) ne te donne pas la même valeur si tu es en haut de ton site ou si tu es en bas (alors qu'il devrait) !

Pour le vérifier, tu remets ton code comme avant (ou tu vas sur le site en ligne que tu m'as filé), puis tu descends doucement jusqu'à coller ton menu, et là, tu vas t'apercevoir que du contenu est caché (ton h1 À PROPOS), pourquoi ?
Parce que le contenu est remonté sous le menu qui est fixé...

Ma solution a consisté à un peu tricher, i.e. que quand tu vas coller ton menu, tu vas décaler d'autant en bas le contenu d'après (pour qu'il évite de remonter)...

J'espère avoir été assez clair Smiley cligne
Modifié par SolidSnake (11 Mar 2016 - 11:33)
Sujet clos
Aller à