Faire un menu qui suit la personne

Sujet résolu

6 avril 2020 à 15:42:06

Bonjour.

J'essaye de trouver comment faire en sorte que le menu suivant :

suive la personne quand il descend dans la page.

Je sais que c'est du css, mais voilà pourquoi je suis sur le forum javascript:

Au moment où la personne s'apprête à descendre ou scroller vers le bas, j'essaye de faire en sorte que le menu rétrécisse, que comme dans l'image suivant, la partie en rouge rétrécisse pour ne faire place qu'à la partie intéressante, sinon, ça va prendre trop de place. Sur internet, il n'y a que des personnes qui utilisent des position: fixe; etc... mais moi ce n'est pas ce que je veux et je ne connais pas le nom de ce que j'essaye de faire.. enfin bref. Image:

Et le code html du menu:

    <header id="h-1">
            <div>
                <a href="index.php"><img id="logo-h" src="truepost.png" alt="truepost"></a>
            </div>
            <nav>
                <ul class="nav-h">
                    <li class="n-l" id="n-l11"><a class="n-a" href="index.php">Accueil</a></li>
                    <li class="n-l" id="n-l22"><a class="n-a" href="second.php">Profil</a></li>
                    <li class="n-l" id="n-l33"><a class="n-a" href="third.php">Amis</a></li>
                    <li class="n-l" id="n-l44"><a class="n-a" href="rien.php">Chat</a></li>
                </ul>
            </nav>
    </header>

Voilà... Merci de votre réponse!

-
Edité par CentreDordi 6 avril 2020 à 18:58:59

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

BenBgln

6 avril 2020 à 17:16:13

Bonjour,

Une petite recherche sur Google aura suffit si c'est bien ce que tu souhaites faire : https://www.w3schools.com/howto/howto_js_navbar_shrink_scroll.asp

CentreDordi

6 avril 2020 à 19:06:49

Re, mec j'arrive pas poster ma réponse, ce site me dit que j'essaye d'injecter des trucs sql, ça m'énerve depuis tt à l'heure, il fait que me bloquer...

PS, j'étais obligé de ne pas utilisé le truc </> sinon ce site me bloque...

Re,

j'ai été bloqué en essayant de répondre parce qu'apparemment j'essayé de mettre des injections sql je sais pas quoi alors que je ne connais même pas le sql......

donc je vais faire moins court car je ne sais même pas si je vais pouvoir envoyé ce message:

J'ai cliqué sur ton lien, j'ai appliqué tout ce que le site avait dit de faire, mais ça ne marche pas. Quand je descend, le header ne rétrécit pas...

Quand suis en haut de la page:

Et quand suis en bas:

mon code html+js:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

</div>

<nav>

<li class="n-l" id="n-l11"><a class="n-a" href="index.php">Accueil</a></li>

<li class="n-l" id="n-l22"><a class="n-a" href="second.php">Profil</a></li>

</ul>

</nav>

</header>

<p>

[…]

</p>

</section>

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {

document.getElementById("h-1").style.padding = "0px 0px";

} else {

document.getElementById("h-1").style.padding = "-20px 0px";

}

</script>

</body>

</html>

Et le css du header:

#h-1 {

top: 0;

height:90px;

background-color: rgb(253, 169, 120);

display: flex;

justify-content: space-between;

align-items: center;

border-bottom: 10px solid #fff;

box-shadow: 0px 0.5px 20px rgba(128, 128, 128, 0.247);

overflow: hidden;

transition:0.4s;

position:fixed;

width: 100%;

z-index: 99;

}

Voilà, merci de votre aide, bonne journée!

-
Edité par CentreDordi 6 avril 2020 à 19:21:09

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

AbcAbc6

6 avril 2020 à 22:44:40

Bonsoir, vu ton MP, j'ai essayé de modifier ton message pour y insérer le code dans les balises, je n'y suis pas arrivé, pas de réponse quand je clique sur le bouton envoyer après modification du message.

Bref il est normal que cela ne fonctionne pas car tu essaies de modifier la valeur du padding en JS or dans ton CSS il n'y as pas de padding. Ajoute en un par exemple padding: 50px 0; et tu verras que cela fonctionne.

Je verrais plutôt les valeurs en JS comme suit:

function scrollFunction() {
                if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
                    document.getElementById("h-1").style.padding = "0";
                } else {
                    document.getElementById("h-1").style.padding = "50px 0";
                }
            }

PS : le titre de ton sujet n'est pas vraiment descriptif de ce que tu souhaites faire.

-
Edité par AbcAbc6 6 avril 2020 à 22:47:06

CentreDordi

7 avril 2020 à 0:27:24

Bonsoir, merci de ta réponse. J'ai modifié, et le code marche. Le rendu est "dynamique" lol.

Merci d'avoir répondu, tu es toujours présent, c'est plaisant de ta part !

Merci à vous deux, bonne nuit!

-
Edité par CentreDordi 7 avril 2020 à 0:27:57

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.