Menu impatient

Par Process, il y a 12 ans

Javascript

Bonjour tout le monde,

Je viens de mettre en ligne la version beta de mon site, afin que vous puissiez m'aider. J'ai réalisé deux menus, le premier "disparaît" lorsque qu'on scroll, et un autre apparaît en scrollant. Le soucis c'est que lorsqu'on arrive sur le site ou que l'on actualise, le menu qui devrait apparaître à la suite du scroll est déjà apparent en haut de la page.

Pour comprendre mon soucis car je peux m'être mal exprimé :

Allez sur : www.jocelyncaron.com
Descendez environ au milieu du site
Et revenez en haut (normalement vous verrez le menu disparaître et lorsque que vous redescendez une seconde fois, réapparaître : c'est l'effet voulu mais alors pourquoi lorsqu'on charge la page il est tout en haut le bougre :) )

Merci pour vos réponses !

2 réponses

2b3ez, il y a 12 ans

J'ai pas tout compris, mais dans ton code tu as deux fois

<header class="branding fixed visible">

ayant des enfant avec la class div1 qui est contrôlé en fadeIn par ton js. Différencie tes class.

De plus, ton jquery indique 

$(window).load( function () {
        $('.div1').fadeIn('slow', function() {
            $(this).fadeTo("slow", 1);
        });
    });

Tu fais un fadeIn et lorsque celui-ci est terminé tu fais une FadeTo à 1, ce qui revient à faire un autre fadeIn

Jquery FadeTO Doc.

Du coup ton premier header en class div 1 et le deuxième en class div2, et lors de ton évènement scroll down penser à mettre ton header div1 en FadeOut et l'inverse en scroll up ;)

Process, il y a 12 ans

J'ai rechangé le site, j'ai tout refais et du coup il marche plus ^^.
Cette valeur permet de le faire apparaitre

header.branding.fixed.visible {
top: 0px;
}

Mais comment je peux faire pour qu'elle prenne cette valeur seulement une fois qu'on scroll vers 100px ? Car du coup, on voit le menu dès le chargement de la page. Je sais pas si je suis encore très clair ^^