Menu qui disparait au scroll

Version imprimable

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:

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,

11/08/2016, 21h48
danielhagnoul

Citation:

Envoyé par the_programmeur

[...] 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.

Tout d'abord merci de la réponse ;) :

Donc voici les lignes concernant le HTML :

Code:

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:

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,

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

Code:

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

12/08/2016, 15h53
the_programmeur

Super merci beaucoup ! C'est exactement ça que je cherchais à faire :D . 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,
12/08/2016, 16h53
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.
13/08/2016, 11h10
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,