Discussion :

[the_programmeur]

Bonjour à tous et à toutes,

Je viens vers vous aujourd'hui car je rencontre u problème avec mon menu. L'idée serait que me menu disparaisse au scroll de l'user (jusqu'à ici pas de soucis ...) mais que ce menu en question réapparaissent dès que l'user scroll mais cette fois-ci dans le sens contraire et que le menu réapparaît à sa place d'origine (et c'est la que ça coince ...)

Voici mon code jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() >= 700) {
                    $('.menu').fadeOut(1000); // ici la classe menu .menu représente donc mon menu qui dois disparaître au scrollbottom et réapparaître au scrolltop
 
                }
            });
 
        });

Je ne sais pas si j'ai été assez clair... si vous avez des questions ou besoin de lignes de code supplémentaire n'hésitez pas

Merci d'avance pour votre aide,

[danielhagnoul]

[...] besoin de lignes de code supplémentaire [...]

Oui ! Les codes HTML, CSS et JS nécessaires pour reproduire votre menu et son comportement, sinon on devra partir d'un exemple théorique.

[the_programmeur]

Tout d'abord merci de la réponse :

Donc voici les lignes concernant le HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
  <div class="container-fluid">
            <div class="background-header">
                <nav>
                    <div class="menu">
 
 
                        <ul class="topnav" id="myTopnav">
                            <li><a href="#home">A propos</a></li>
                            <li><a href="#news">Mes travaux</a></li>
                            <li><a href="#contact">Me contacter</a></li>
                            <li><a href="#about">Nouveauté</a></li>
                            <li class="icon">
                                <a href="javascript:void(0);" onclick="myFunction()">☰</a>
                            </li>
                        </ul>
 
 
                    </div>
                </nav>

Les lignes concernant le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #00796B;
}
ul.topnav li {float: left;}
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
 
}
ul.topnav li a:hover {background-color:#795548 ;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

Merci pour votre aide,

[Toufik83]

le menu disparaît au moment du scrolling Window, et il redevient visible quand le scrolling égale à 0 et pas 700.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
if ($(window).scrollTop() > 0) {
                    $('.menu').fadeOut(1000); 
                }
                else{
                $(".menu").fadeIn(1000);
                }

[the_programmeur]

Super merci beaucoup ! C'est exactement ça que je cherchais à faire . J'ai une dernière question, si on souhaite changer l'effet pour faire disparaître/apparaître le menu on peut procéder comment ?

Merci pour l'aide déjà apporter,

[Toufik83]

tu veux changer quel effet? transition, couleur... ?
il y'a la fonction $.animate() qui te permet d'animer un élément html comme tu veux.

[the_programmeur]

Oui merci j'ai réussi à faire ce que je voulais avec la méthode .animate !
Merci beaucoup, mon problème est donc solutionné.
Cordialement,