Bonjour,

Je suis en train de coder une fonction très simple :
- lorsque ma navigation se rapproche trop de mon logo, celle-ci doit disparaître
- à l'inverse c'est mon icône burger qui apparaît

Le but étant de réutiliser cette fonction sur différents sites dont je ne connais pas à l'avance la longueur des menus.

Voici ma première portion de code : 

if(DistanceNavLogo < 20) {
    navigation.style.display = "none";
    burger.style.display = "flex";
}

Elle fonctionne très bien et elle est automatiquement appelée par cette fonction :

window.addEventListener('resize', updateMenu);

Mon problème est le suivant : j'aimerais que lorsque la taille du menu s'agrandit à nouveau, le burger disparaisse au profit de la navigation.

J'ai donc essayé de compléter mon code par ceci : 

if(DistanceNavLogo < 20) {
    navigation.style.display = "none";
    burger.style.display = "flex";
}
if(DistanceNavLogo >= 20) {
    navigation.style.display = "flex";
    burger.style.display = "none";
}

Et là, c'est là rien du tout : la deuxième condition ne s'applique jamais et la navigation reste en display none.

Sauriez-vous comment régler ce problème ?
Je vous remercie par avance pour votre temps. 

-
Edité par KennyDunand 9 juin 2021 à 13:27:59

Bonjour peut être qu'utilisé un else peut évité un conflit entre les conditions:

if(DistanceNavLogo < 20) {
    navigation.style.display = "none";
    burger.style.display = "flex";
} else {
    navigation.style.display = "flex";
    burger.style.display = "none";
}

 Après normalement tu avais écris la condition contraire dans le 2iem if cela aurait du fonctionnait quand même cela vient peut être de la façon dont et calculé la distance entre la nav et le logo lorsque la nav et en display none.

Si tu bloque toujours est-ce que tu peut nous posté un code plus complet de la fonction updateMenu.

Hello Samuel,

Merci pour ta réponse !

À force de recherches j'ai trouvé ce qui n'allait pas.
Ce n'est pas le else, c'est plus profond :

Ma fonction mesure la distance entre la navigation et le logo.
Mais quand elle est en display = none, impossible de mesurer une telle distance.

Du coup la condition de retour ne sera jamais remplie.

Du coup je vais aller chercher comment réaliser une mesure d'un élément en display none (ou contourner cette possibilité).

Je mets ce sujet en résolu, merci encore pour ta réponse ! 

Lorsque que la nav et en display none elle n'est plus calculé par le navigateur (il l'ignore)

Peut être que tu devrais prendre la distance du menu burger et du logo lorsque que la nav et display none comme c'est le menu burger que tu as mit à la place de la nav.

Tu peut obtenir des informations de position/dimension  sur un élément en Javascript avec getBoundingClientRect mais il faudra que l'élément ne soit pas en display none quand même pour que ça fonctionne.