Menu flottant puis .... fixe

[Martin123]

Bonsoir à tous,

J'aimerai créer le même effet que celui d'Apple sur sa page Store par ici.
Partie droite

résumé

J'ai mis en place la CSS suivante

.menuFlottant {
  position: absolute;
  top: 1em;
  right: 1%;
  border: 1px solid #000000;
  padding: 1em;
  width: 20%;
}
html>body .menuFlottant {
  position: fixed;
}

Tout fonctionne bien, seul pb, la div reste fixe à 1em du haut alors que je voudrais quelle fasse comme chez Apple quelle démarre du milieu de la page puis se cale à 1em (par ex.) du haut de la fenêtre pendant le reste du scroll, qui peut être long.

D'avance merci pour vos conseils.

 

[Niconemo]

Il y faut forcément du javascript pour réaliser ça.

 

[Martin123]

Oui mais encore !

 

[Niconemo]

Oui mais encore !

Une version Jquery trouvée par Google (parmi les très nombreuses réponses, c'est exactement, par défaut, le même comportement que ton exemple, c'est pour ça que je propose celui-ci) :

Script :
http://www.mkyong.com/jquery/mashable-floating-effect-example-with-jquery/

Demo du script :
http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html

Il faut déjà installer jquery sur ta page (lien javascript) puis suivre les instructions du premier lien.
Tu peux jeter un oeil au code source du 2e lien pour exemple.

 

[Niconemo]

En cherchant un autre truc, je viens de tomber sur un autre exemple ici :
http://www.webanddesigners.com/floating-share-box

Et ici une analyse du fonctionnement de la page d'Appel que tu cites en exemple :
http://jqueryfordesigners.com/fixed-floating-elements/
Ce qui mène à ça:
http://static.jqueryfordesigners.com/demo/fixedfloat.html

Logiquement là, tu as tout ce qu'il faut pour te débrouiller.

En étant perfectionniste, on pourrait imaginer de rentre les mouvement plus fluide avec une petite inertie…

 

[anty]

Je me permet de poser ma question sur ce post, étant donné que c'est en rapport avec ce qui est demandé et les liens du message juste au dessus.

Donc voila, j'utilise le tuto à ce lien la: http://jqueryfordesigners.com/fixed-floating-elements/

Cependant, ayant un footer qui fait 350px de hauteur, lorsque la fenêtre est réduite en hauteur, et que je descend tout en bas, la partie qui suit passe dessus le footer.

Alors dans l'idée je me suis dit qu'il faut faire l'inverse de la condition pour le bloquer en haut, cependant n'ayant jamais fait de javascript auparavant, ni vraiment de programmation en php, je suis en galère.

Est-ce que quelqu'un peut me dire si dans la démarche, mon code est pas loin d'être juste ? (car avec celui-ci, le menu ne bouge plus du tout, mais je ne désespère pas.


Voici le http://www.copypastecode.com/41900/



Je suis conscient que c'est certainement du grand n'importe quoi alors si quelqu'un pouvait me le dire avant que j'y passe trop de journées à chercher la solution

Merci

 

[eNeos]

'lut

Si le menu présent ICI correspond à ce que tu cherches (un exemple sur une page longue ICI), j'essaierai de rassembler mes souvenirs pour t'expliquer le comment que j'ai fait.

 

[Niconemo]

lorsque la fenêtre est réduite en hauteur, et que je descend tout en bas, la partie qui suit passe dessus le footer.

Proposition simple : le faire simplement passer sous le footer (avec z-index).

Sinon, il faudrait voir de plus près, mais je ne pense pas qu'on puisse adapter ce script précis simplement en en inversant le fonctionnement car la logique ne fonctionne plus (car elle est basée sur la position par défaut par rapport au haut de l'écran, pas au bas). Ou alors il faudrait que la positioon par défaut du menu se fasse par rapport au bas de l'écran au lieu du haut ce qui risque d'être bizarre.

Edit : cela dit, je viens de vérifier, dans la version d'Apple, ça marche dans les deux sens (avec le header et le footer). On peut suggérer le challenge à l'auteur de l'article de jQueryForDesigners… MAis je vois qu'au moins deux commentaires y font allusion.

---------- Nouveau message ajouté à 13h57 ---------- Le message précédent a été envoyé à 13h53 ----------

'lut

Si le menu présent ICI correspond à ce que tu cherches (un exemple sur une page longue ICI), j'essaierai de rassembler mes souvenirs pour t'expliquer le comment que j'ai fait.

Non, ici, c'est plus simple c'est simplement une position fixe qui ne nécessite aucun javascript. Le demande de départ c'est que le comportement change en cours de route selon que le header (ou le footer pur la 2e demande) est encore visible ou non dans la page.

 

[anty]

'lut

Si le menu présent ICI correspond à ce que tu cherches (un exemple sur une page longue ICI), j'essaierai de rassembler mes souvenirs pour t'expliquer le comment que j'ai fait.

Salut ami pistard Je crains que ce ne soit pas mieux car quand on réduit vraiment beaucoup la hauteur de la fenêtre, c'est le bas du menu qui disparait, et moi je veux le contraire en gros, et au dessus du footer.

Proposition simple : le faire simplement passer sous le footer (avec z-index).

J'y avais pensé, mais je souhaite que le bloc (appelons le menu), se bloque au niveau du footer et reste, et "disparaisse donc par le haut" (si la fenêtre du navigateur est très faible en hauteur).

Je sais pas si cette histoire de disparaitre par le haut est clair, si besoin je peux faire un p'tit montage sur photoshop pour expliquer :rose:

Merci à vous

Edit: je viens de comprendre un truc assez important dans le fonctionnement du script... Bon je tente quelque chose et je reviens pleurer ici quand ça ne donnera rien... (quand je dis que j'y pige rien en javascript, et même en prog... c'est pas pour rien x))

---------- Nouveau message ajouté à 15h12 ---------- Le message précédent a été envoyé à 14h00 ----------

Voila, j'ai pensé à une solution qui pourrait être viable mais je n'ai pas les connaissances pour que ce soit vraiment fonctionnel.

J'en suis à, sans utiliser la fonction scrollHeight (pour le moment) qui permet de connaître la hauteur totale de la page, si pour l'exemple on dit que la page fait 1000px, le footer 200px de haut et le menu fait 200px également.

Cela signifie que le menu doit être fixe "après avoir parcouru (scroll)) 600px.
Cependant, dans mon test, le menu s'arrête bien mais quand je continu de scroller vers le bas celui-ci disparait simplement.

Quelqu'un aurait une explication ?

(Forcément maintenant celui-ci passe au dessus du header maintenant, mais je fais étape par étape... Et le bas m'a l'air d'être le plus hardu..

PS: copypaste veut pas prendre mon code le saligot... En gros pour le test ma variable top = 600, la condition est if( y <= top)..