Bonjour,

Je cherche à faire un menu qui se réduit au fur et à mesure que l'on scroll (progressivement).

Le problème est que je ne sais pas comment faire et que je n'ai rien trouvé de tel sur Internet.

Merci beaucoup d'avance pour votre aide !

Maxime.

Salut, j'ai essayé de faire un truc avec le cours sur javascript que j'ai lu hier sur openclassrooms, c'est pas génial mais c'était juste pour m'entrainer

https://codepen.io/hugolebihan56/pen/zYReGqG

Je ne vois pas l’effet de mon côté…

C'est ma faute j'ai tout supprimé car j'étais pas satisfait, ça devrait fonctionner maintenant !

Merci pour ta réponse, mais je cherche a faire un menu dont la taille se réduit progressivement, mais qui s'arrête après (quand il devient suffisamment petit, il reste comme il est), et pas qui se déplace (et qu'on ne le vois plus).

J'ai essayé de modifier ton code, sans succès...

-
Edité par maximehamou_ 15 juin 2022 à 14:29:57

@VortexVortex

Bonjour, petite coquille sans incidence sur le code fourni. En HTML un identifiant est unique dans le document vous ne pouvez avoir plusieurs id="menu" . 

@maximehamou_

Quel est le code que vous avez commencé à écrire?

-
Edité par AbcAbc6 14 juin 2022 à 18:08:08

Je veux bien en screen de ton menu, car j'ai du mal à visualiser et à comprendre le "quand il devient suffisamment petit"

J'aimerais qu'il passe progressivement de cela :

À cela :

J'ai modifié mon code. Si quelqu'un sait comment remplacer le 27.0 pixel par la valeur du height: fit-content du navbar pour éviter d'écrire les pixels "en brut" je veux bien la réponse 

C'est exactement ce que je cherchais !

Voilà pour ta question (je me suis permis de modifier quelques trucs) :

Pour le window.onscroll, openclassrooms refuse que je le mette 

const tailleMenu = 200; // 200 px

function scrollFunction() {
  const height = window.scrollY * (tailleMenu / (document.body.scrollHeight - tailleMenu));
  
let navbarHeight = document.querySelector("#navbar").style.height
  
  if (navbarHeight < "fit-content"){
document.querySelector("#navbar").style.height = tailleMenu-height*2 + "px";
  } 
}

Merci beaucoup !

-
Edité par maximehamou_ 16 juin 2022 à 11:50:07

Je suis pas sur de comprendre ta condition 

(navbarHeight < "fit-content")

pour moi là, il compare un float et un string ? J'ai testé sur codepen, est arrivé en bas de la page le menu est totalement réduit. Si ça fonctionne chez toi tant mieux 

Non, je compare la taille de la navbar avec la valeur « fit-content » (qui est aussi une taille).

En effet, chez moi cela fonctionne !

-
Edité par maximehamou_ 17 juin 2022 à 15:25:20