Je suis à la recherche d'une façon que je peux créer un div qui sera fixé sur la page verticalement, donc si l'utilisateur fait défiler vers le bas, les séjours div au même endroit sur la page. Mais l'ont positionné tout à fait horizontalement, donc si l'écran des utilisateurs est plus étroit que ma page Web, le défilement vers la droite ou la gauche ne sera pas la cause de la div à se déplacer à l'écran et, dans certains cas, restent soit la moitié visible au bord de l'écran . ou désactiver complètement la page
Ce div doit être dans une « position: relative ». div p>
Je suis assez sûr qu'il n'y a pas moyen d'assigner des positions différentes à l'axe d'un variant div mais c'est la meilleure façon de décrire l'effet que je souhaite accomplir. p>
J'ai ce jusqu'à présent, ce qui est fondamentalement juste une division fixe au sein d'une division relative. p>
CSS strong> p> <div id="container">
<div id="blue-box"></div>
</div>
3 Réponses :
Voici ma solution (testée en opéra et firefox): http://jsfiddle.net/cch2z/2<< a>
L'astuce consiste à spécifier Droite: 0px; , cela positionnera la case 0PX du bord droit de la fenêtre.
Cela ne positionne pas absolument la DIV dans le conteneur DIV sur l'axe horizontal. J'ai besoin de garder la boîte bleue au même point horizontalement dans le conteneur. Il restera donc toujours à la marge-gauche: 400px; par rapport au conteneur div. Donc, lorsque l'utilisateur fait défiler horizontalement, la boîte bleue se déplacera avec le conteneur.
avec jQuery, utilisez la propriété ScrollLeft () du document! Cela fonctionnerait Voir aussi http: / /jsfiddle.net/zhqkq/9/ bonne chance! Edit: Si vous voulez utiliser votre marge préréglée - à gauche au lieu d'un codé dur " 400 ", utiliser
Merci pour la réponse, cela fonctionne bien sur tous les derniers navigateurs! Malheureusement, il ne résout pas le problème sur IE8. Y a-t-il de toute façon pour que cela fonctionne pour travailler sur IE8?
Ah, bonne prise. Cela devrait être $ (Windows) .Scroll (...). Mise à jour de ma réponse!
Quelle solution géniale. Merci!
J'étais sur le point de poser cette question moi-même et j'ai trouvé cela dans des questions connexes. Y a-t-il une implémentation sans jQuery que je pourrais utiliser?
Utiliser Vanilla JavaScript serait quelque chose comme ceci: dans les navigateurs modernes, à partir de 2020, vous devez essayer d'utiliser la position CSS: fixe; de positionnement JavaScript car il est largement supporté maintenant.