DIV en 'fixed' qui se déplace lors d'un scroll [Résolu]

PatSan · 10/06/2011, 17h46

J'ai un problème avec la position d'une DIV : elle est déclarée en position 'Fixed'.
A l'affichage de ma page, elle se place exactement où je veux.

Quand je scroll la page (en horizontale ou verticale), le div reste à sa place sur l'écran.
C'est un comportement normal sauf que je veux qu'elle reste à sa place initiale sur ma page !

Comment faire ? Je sais qu'en pur CSS, c'est galère, voire impossible...
Une solution javascript, compatible avec la plupart des navigateur existe-t-elle ?

J'ai déjà essayé avec une position 'relative' par rapport à un conteneur en position 'absolute' mais le positionnement en utilisant la récursivité sur offsetParent ne fonctionne pas très bien car j'ai pas mal d'imbrications de div et de tables...

Netek · 10/06/2011, 19h34

Normalement tu peux faire ca sans JS avec l'attribut CSS position: absolute;

PatSan · 10/06/2011, 22h54

position absolute ne résoud pas le problème : quand tu rétrécis ou agrandis la fenêtre, la div ne suit pas sa position initiale (relativement à un autre objet), elle reste fixe...

witeman · 10/06/2011, 23h06

Pas sûr de bien comprendre ce que tu recherches, mais je tente :
En gros, ce que tu recherches, c'est que ton div garde toujours le même ratio d'espace dans ta page lorsque tu agrandis ou réduis celle ci, et tout en conservant son ancrage dans le visuel (position:fixed) ?

Si c'est ça, il faudra effectivement passer par du JS je crois, avec un appel des dimensions de la fenêtre et tout le touti...

Mais peut-être n'ai-je pas compris ta demande...

PatSan · 10/06/2011, 23h10

Witeman, tu as exactement mis le doigt dessus : je cherche à ce que l'ancrage soit conservé par rapport à un autre élément et ce, quelque soit la manipulation de la fenêtre : agrandissement, rétrécissement, déplacement,...

witeman · 10/06/2011, 23h23

"déplacement" ? je ne suis pas sûr de bien comprendre cette dernière manip

Autrement, peut être que ce que tu recherches est tout simplement faisable avec des dimensions relatives (pourcentage) ?
As-tu essayé ?

Un truc du genre dans ton css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
body
{
width: 100%;
height: 100%
}

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#ton_div
{
position: fixed;
top: 100px;
left: 100px;
width: 30%;<!-- valeurs au pif, à toi de voir-->
height: 40%;<!-- valeurs au pif, à toi de voir-->
}

mais cela nécessite surement de revoir la structure de ta page...

PatSan · 10/06/2011, 23h56

Désolé, le déplacement n'induisait pas de problème...
Ta solution ne fonctionne pas.
Si tu veux un exemple du problème, va sur le site www.enetplaza.com et click sur une combo box (celle de country par ex.). Agrandit et rétrécit la fenêtre par la suite, et tu verras le problème apparaître...

witeman · 11/06/2011, 00h22

Ok ^^
C'est bon, je cerne beaucoup mieux le problème. Un exemple est tellement plus parlant

Essayes simplement de mettre ton div avec des valeurs de ce genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#ton_div
{
position:absolute; <!--dans ton cas ce n'est pas du fixed qu'il te faut car ton div doit rester accrocher a ta page qui elle même peut être scrollée-->
left:50%;<!--avec ça tu fais de ton div un élément centré comme ta colonne centrale contenant ton site-->
margin-left:-200px;<!--cette valeur est à chercher par toi même de manière à ce que le div s'ajuste parfaitement avec ta combo box-->
top: ?? px;<-- ici tu conserves ta valeur déjà affectée dans ton code, il ne changera pas et pareil pour tes dimensions-->
}

Avec ce code, normalement : Tadaaam, magie ! Ton div restera fixé sous ta combo box qu'importe les agrandissements ou réductions de ta page !

Penses ceci dit à bien spécifier la valeur width:100% à ton body !

danielhagnoul · 11/06/2011, 10h22

Bonjour

Le problème de positionnement est la conséquence du fait que le sous-menu reste ouvert lorsque le pointeur le quitte.

NoSmoking · 11/06/2011, 14h31

Bonjour,
il faut que la DIV qui contient ton pseudo SELECT contienne également la DIV qui contient la liste des pays.
exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#select {
  border : 1px solid black;
  width : 250px;
  margin : auto;
}
#liste {
  display : none;
  border : 1px solid black;
}
</style>
</head>
<body>
<div id="select" onclick="document.getElementById('liste').style.display='block';">
  Titre SELECT
  <div id="liste">
    <ul>
      <li>All</li>
      <li>Canada</li>
      <li>France</li>
    </ul>
  </div>
</div>
</body>
</html>

PatSan · 11/06/2011, 15h43

Réponse à danielhagnoul :
-------------------------
Normal, ce n'est pas un menu ou sous-menu, c'est une combobox qui doit rester ouverte lorsque le pointeur la quitte...

Réponse à witeman :
--------------------
Cela ne fonctionne plus lorsque la taille de la fenêtre est inférieure à la taille de la colonne centrale du site --> la div se déplace à ce moment là.

Réponse à NoSmoking :
----------------------
Je vais voir ce que ça donne...

Bovino · 11/06/2011, 16h32

Il suffit de repositionner l'élément sur l'événement onresize.

witeman · 11/06/2011, 16h40

Il te suffit de préciser un margin-min adéquat et ce sera okay.

PatSan · 14/06/2011, 01h35

NoSmoking : ta solution est toute simple et elle fonctionne. J'ai cherché à faire quelque chose de beaucoup trop compliqué.

10/06/2011, 17h46	#1
PatSan Candidat au titre de Membre du Club Développeur Web Inscription : avril 2011 Messages : 44 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations professionnelles : Activité : Développeur Web Secteur : Arts - Culture Informations forums : Inscription : avril 2011 Messages : 44 Points : 10 Points : 10	DIV en 'fixed' qui se déplace lors d'un scroll J'ai un problème avec la position d'une DIV : elle est déclarée en position 'Fixed'. A l'affichage de ma page, elle se place exactement où je veux. Quand je scroll la page (en horizontale ou verticale), le div reste à sa place sur l'écran. C'est un comportement normal sauf que je veux qu'elle reste à sa place initiale sur ma page ! Comment faire ? Je sais qu'en pur CSS, c'est galère, voire impossible... Une solution javascript, compatible avec la plupart des navigateur existe-t-elle ? J'ai déjà essayé avec une position 'relative' par rapport à un conteneur en position 'absolute' mais le positionnement en utilisant la récursivité sur offsetParent ne fonctionne pas très bien car j'ai pas mal d'imbrications de div et de tables...
	00

10/06/2011, 19h34	#2
Netek Membre régulier Damien Gros Développeur Web Inscription : mars 2011 Messages : 58 Détails du profil Informations personnelles : Nom : Damien Gros Âge : 25 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mars 2011 Messages : 58 Points : 73 Points : 73	Normalement tu peux faire ca sans JS avec l'attribut CSS position: absolute; __________________ Développeur web netek.fr PHP, MySQL, Ajax, jQuery, Drupal, Magento
	00

11/06/2011, 10h22	#9
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonjour Le problème de positionnement est la conséquence du fait que le sous-menu reste ouvert lorsque le pointeur le quitte. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

11/06/2011, 16h32	#12
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Il suffit de repositionner l'élément sur l'événement onresize. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

10/06/2011, 22h54	#3
PatSan Candidat au titre de Membre du Club Développeur Web Inscription : avril 2011 Messages : 44 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations professionnelles : Activité : Développeur Web Secteur : Arts - Culture Informations forums : Inscription : avril 2011 Messages : 44 Points : 10 Points : 10	position absolute ne résoud pas le problème : quand tu rétrécis ou agrandis la fenêtre, la div ne suit pas sa position initiale (relativement à un autre objet), elle reste fixe...
	00

10/06/2011, 23h06	#4
witeman Invité de passage Inscription : septembre 2010 Messages : 14 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 14 Points : 4 Points : 4	Pas sûr de bien comprendre ce que tu recherches, mais je tente : En gros, ce que tu recherches, c'est que ton div garde toujours le même ratio d'espace dans ta page lorsque tu agrandis ou réduis celle ci, et tout en conservant son ancrage dans le visuel (position:fixed) ? Si c'est ça, il faudra effectivement passer par du JS je crois, avec un appel des dimensions de la fenêtre et tout le touti... Mais peut-être n'ai-je pas compris ta demande...
	00

10/06/2011, 23h10	#5
PatSan Candidat au titre de Membre du Club Développeur Web Inscription : avril 2011 Messages : 44 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations professionnelles : Activité : Développeur Web Secteur : Arts - Culture Informations forums : Inscription : avril 2011 Messages : 44 Points : 10 Points : 10	Witeman, tu as exactement mis le doigt dessus : je cherche à ce que l'ancrage soit conservé par rapport à un autre élément et ce, quelque soit la manipulation de la fenêtre : agrandissement, rétrécissement, déplacement,...
	00

10/06/2011, 23h56	#7
PatSan Candidat au titre de Membre du Club Développeur Web Inscription : avril 2011 Messages : 44 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations professionnelles : Activité : Développeur Web Secteur : Arts - Culture Informations forums : Inscription : avril 2011 Messages : 44 Points : 10 Points : 10	Désolé, le déplacement n'induisait pas de problème... Ta solution ne fonctionne pas. Si tu veux un exemple du problème, va sur le site www.enetplaza.com et click sur une combo box (celle de country par ex.). Agrandit et rétrécit la fenêtre par la suite, et tu verras le problème apparaître...
	00

11/06/2011, 15h43	#11
PatSan Candidat au titre de Membre du Club Développeur Web Inscription : avril 2011 Messages : 44 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations professionnelles : Activité : Développeur Web Secteur : Arts - Culture Informations forums : Inscription : avril 2011 Messages : 44 Points : 10 Points : 10	Réponse à danielhagnoul : ------------------------- Normal, ce n'est pas un menu ou sous-menu, c'est une combobox qui doit rester ouverte lorsque le pointeur la quitte... Réponse à witeman : -------------------- Cela ne fonctionne plus lorsque la taille de la fenêtre est inférieure à la taille de la colonne centrale du site --> la div se déplace à ce moment là. Réponse à NoSmoking : ---------------------- Je vais voir ce que ça donne...
	00

11/06/2011, 16h40	#13
witeman Invité de passage Inscription : septembre 2010 Messages : 14 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 14 Points : 4 Points : 4	Il te suffit de préciser un margin-min adéquat et ce sera okay.
	00

14/06/2011, 01h35	#14
PatSan Candidat au titre de Membre du Club Développeur Web Inscription : avril 2011 Messages : 44 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations professionnelles : Activité : Développeur Web Secteur : Arts - Culture Informations forums : Inscription : avril 2011 Messages : 44 Points : 10 Points : 10	NoSmoking : ta solution est toute simple et elle fonctionne. J'ai cherché à faire quelque chose de beaucoup trop compliqué.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email