Menu "Float" puis "Fixed"

Bonsoir la compagnie,

Je fias un test de site "one page", avec animation sur le scroll/ ancres avec Jquery lors de clic sur le menu. Ca fonctionne impec avec mon menu en top et "fixed"!!!

Cependant j'aimerais qu'au chargement de la page le menu soit placé en milieu de page et que lors du clic sur le bouton du menu pour passer à l'ancres suivante, le menu se place en top fixed...

pour l'instant mon menu fonctionne correctement avec l'animation, le scroll et le menu en top, mais je ne sais pas comment faire pour que le menu soit au milieu puis se place en top au premier scroll!!

Quelqu'un pourrait m'aiguiller (css? Js? ...?) merci d'avances,

Voici le lien du test : ICI

H.I.M
Modifié par H.I.M (12 Jan 2012 - 22:52)

bonsoir,

tu peut par exemple mettre un : top:50%; pour header dans le css et reinitialiser celui-ci dans ton code javascript lorsque l'on click sur ton 1 lien '#'.
par exemple :
1ere ligne qui existe qui récupère l’évènement onclick sur tes lien avec comme valeur href : # .
2eme ligne a ajouter pour passer top a 0 pour #header

 jQuery('a[href^="#"]').bind('click',function(){
				jQuery('#header').css('top','0');

++

Hello,

Merci pour cette réponse,
Dans le css je mets un top:50%; sur la div header ou menu?
Ensuite la fonction a ajouter a mon JS permet de réinitialiser le top lors du click?
Car en fait j'aimerais que le top reste toujours a 50% sur la première div et passe en top 0 sur les autres ancres.

bonsoir,

heu, pour le css , il s'agit de #header.

Pour ton plugin jquery, ça serait bien qu tu l'analyse un peu pour comprendre comment ça marche si tu n'as fait un simple copier/coller.

2 liens pour t'aider a piloter jquery :
http://jquery.developpeur-web2.com/documentation.php (fr)
http://api.jquery.com/ (en)

ce qu'il te faut savoir:
-comprendre ton script de base , donc avoir des notions de base en javascript.(avec jQuery on fait beaucoup sans en savoir beaucoup).

- déclarer une variable

- c'est modifier une valeur css en jquery : css(propriété,valeur);

- que tu ne peut indiquer qu'une valeur en chiffre, l'unité est le pixel et qu'il te faut recuperer la hauteur de la fenêtre et la divisé par 2.(exemple: hw=jQuery(window).height()/2;)

- faire une condition sur une valeur avec if ...else ... et utiliser les operateur de comparaisons.

Si tu est un vrai débutant, compte 6 mois pour acquérir des bases en html/css et js en passant sur le ce site et celui du SDZ (tutos et forums) et éventuellement un budget de 80 a 150 €uros en bouquins bien choisis.

Petit truc: intéresse toi aux problèmes des autres sur les forums (sans forcement intervenir), c'est une premiere mine d'infos , de tests et de solutions , de bonne et mauvaises pratiques, puis abonement au fill rss et twitter peuvent aussi t'abreuver d'infos ... tout à trier .