Discussion :

[Carolinee]

Bonjour à tous !

J'essaie de faire une page web, et je pense avoir besoin de Javascript pour la réaliser... Mais je ne sais pas vraiment où chercher !

Voici mon problème : lorsqu'on arrive sur une page, j'aimerais avoir une barre de menu s'affichant à environ 50px du bord supérieur de ma page (elle serait positionnée juste en-dessous d'un logo).
Comment faire pour que cette barre reste fixe en haut de la page lorsque l'on descendra avec la barre de défilement ? Le menu devra donc changer être solidaire de la page lorsque le haut de la page ne l'a pas atteint, et rester en haut de la fenêtre lorsque l'on descend plus bas (i.e. lorsque l'on aura dépassé le logo). Ainsi, elle sera toujours visible.

J'espère avoir été assez claire...

Merci pour votre aide !

[RomainVALERI]

L'objectif est a priori réalisable, mais en effet il me semble que le CSS ne suffira pas, il y aura une partie en Javascript très probablement.

Peut-on voir ton code actuel, ou disons les essais que tu as faits jusqu'ici pour atteindre ton but ?

[Darkyl]

Bonjour,

Si j'ai bien compris ton problème :
- tu créer un div qui affichera ta page generale (qui sera scrollable);
- tu creer un div qui affichera ta bannière + menu (tous les éléments que tu veux fixer);

Ainsi si tu scrolles ta page, tu intéragis avec le div de ta page generale et non le scroll du body. Ton deuxième div restera donc toujours à sa place (ps : oublie pas de mettre overflow:hidden sur ton index et position:absolute sur ton div menu).

D'accord, le div du menu ne bougera jamais même si le scroll est tout en haut.

Si tu veux qu'il bouge, fais une fonction que tu actualises à chaque scroll et qui affecte à ton div menu ses positions normales+valeurs des scroll (verti / hori)...

Attention : j'ai eu des soucis de scintillement avec chrome et IE, seul Firefox affiche bien les nouvelles positions sans scintillement.
Tu peux aussi mettre une anim sur ta fonction d'actualisation pour que le div du menu se déplace jusqu'à sa nouvelle position.

Ainsi pas de scintillement mais si l'utilisateur ne fais que scroller, tu lags...

[Carolinee]

Merci pour ta réponse.

Malheureusement, je n'ai pas vraiment pu essayer de la faire, parce que je ne sais pas quelle librairie Javascript (et quelle fonction ou plug-in) me permettrait de réaliser cet effet.
Pourrais-tu m'indiquer si jQuery permet de le faire, où si je devrais plutôt utiliser une autre librairie ?

Sinon, j'ai trouvé un site avec exactement l'effet recherché (menu du haut) : http://www.smartplanet.com/blog/thin...iving-car/5445
Le problème, c'est que je n'arrive pas à comprendre le code utilisé sur ce site.

Merci d'avance pour ton aide !

[Carolinee]

Je n'avais pas vu le message de Darkyl !
Merci, c'est intéressant, mais je ne sais pas comment accéder au scroll...
Je suis une débutante en Javascript...
Est-ce que ce comportement n'est pas disponible dans une librairie ?
Merci !

[ireolax]

Bonjour,

Tu peux peut-être essayer avec ce tuto et adapter :

http://tympanus.net/codrops/2009/12/...uery-tutorial/

[Darkyl]

Que tu ne sache pas quelle architecture générale adopté pour faire telle ou telle chose, c'est normal, tu es apparemment (selon tes dires, débutante, tout comme moi d'ailleurs).
Que tu demande de l'aide pour le concept général de ton script, c'est normal aussi.
Maintenant, une fois l'architecture global trouvée, cherche sur le net pour les spécifications: comme par exemple, le scroll.

Aec jquery, les évènements liés au scroll sont facilement gérable, il te suffit de taper scroll + jquery dans google.

Essaye de faire ton script un minimum, montre nous ou sont tes erreurs si tu n'y arrive pas.
Je pense que te plonger dans une bibliothèque ou un tuto ne t'aidera pas tant que ça. Ce que tu essaye de faire n'est pas vraiment compliqué.

Il faut :
- arriver à assigner une fonction lambda à l'évènement scroll de ta page;
- déclarer la fonction lambda
- arriver à assigner des valeurs pour le top et left de ton div (soit par jquery soit en javascript pur).

Quand tu sera faire cela, ton script ne te posera plus de problème. Maintenant, si tu as un problème pour faire cela, aprés quelques recherches et cours sur internet, n'hésite pas à reposter.

Dans mon post précédent, je t'ai donné deux solutions fondamentalement différentes pour arriver (à peu prés) au même résultat.
As-tu vu la nuance entreles deux méthodes et les as tu compris? (dans leurs concepts).

Si tu veux voir le rendu de ma solution : mon site
(scroll la page et regarde les menus, compatible firefox et chrome mais pas IE)

Cordialement

[Carolinee]

Merci pour toutes vos réponses !
C'est bien plus clair maintenant !
J'essaie de le faire, et si j'ai encore des soucis, je reviens vers vous !