div qui suit le scroll sans depasser hauteur div

ju0123456789 · 18/02/2011, 12h32

Bonjour,

J'ai un menu, à gauche, qui est dans un TD assez haut, muni de rowspan.
J'aimerais que mon menu rewte toujours en milieu de page, jusque là, pas de problemes.
Mais quand je remonte tout en haut de page le menu me suit toujours, et se place parmi tous les elements du haut du menu.
Je voudrais que le div se déplace donc en fonction de mon scrolling, mais s'arrete en haut du TD dans lequel il s'est placé.

J'ai fait ceci en feuille de style :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
.Test
{
  position: fixed;
  top: 50%;
  width: 150px;
  height: 200px;
  margin-top: -100px;
  border: 1px solid #333;
  background-color: #eee;
}
</style>

mon TD ce présente comme ceci :

Code :

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

1
2
3
4
5
<td rowspan='".$NbLignes."' width='150'>
  <div class='Global'>
    <div class='Test'>MENU</div>
  </div>
</td>

Merci beaucoup

NoSmoking · 19/02/2011, 14h54

Bonjour,
pas sûr qu'en pur CSS cela soit jouable, il te faudra une pincé de javascript pour tester lors du scroll de la page, la position du menu et de la retoucher le cas échéant.

ju0123456789 · 21/02/2011, 09h53

Bah effectivement en CSS ça ne amrche pas, ça dépasse du TD quand meme. Tu sais comment je pourrais faire ça en JS ?

NoSmoking · 21/02/2011, 18h37

en pur CSS il y aurait un truc du style

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
31
32
33
34
35
36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>[...]</title>
<style type="text/css">
html, body {
  margin : 0;
  paddding : 0;
  height : 1000px;
}
#central {
  margin-left : 150px;
  margin-right : 150px;
  height : 100%;
  border : 1px solid #e0e0e0;
  background-color : #f0f0f0;
  min-width : 600px;
}
#menu {
  position : fixed;
  left : 0px;
  top : 50%;
  bottom : 50%;
  margin-top : -75px;
  height : 150px;
  width : 150px;
  border : 1px solid #8080fe;
  background-color : #e0e0ff;
}
</style>
</head>
<body>
<div id="central"></div>
<div id="menu"></div>
</body>
</html>

mais je ne sais si cela répond réellement à ton besoin.

Nota : la table pour faire de la mise en page c'est dommage.

ju0123456789 · 22/02/2011, 09h38

Bonjour et merci de ta réponse.
Non ce n'est pas ça.
Car selon la taille de l'écran, le positionnement du DIV change. et sur certains ecrans le div, en haut de page, est beaucoup trop haut et dépasse donc le fameux <TD>. (ça empiète sur le reste de la page :/)
Effectivement je pense qu'il faut une petit touche de JS.
J'ai essayé en relevant les coordonnées haut/gauche du div, pour ne pas qu'elles dépassent celles du <TD>. Mais ça marche pas je galère lol

NoSmoking · 23/02/2011, 09h15

Citation:

J'ai essayé en relevant les coordonnées haut/gauche du div, pour ne pas qu'elles dépassent celles du <TD>. Mais ça marche pas je galère lol

il nous faudrait un bout de code avec la structure HTML pour voir ou cela coince, ou mieux une page ne ligne

19/02/2011, 14h54	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	Bonjour, pas sûr qu'en pur CSS cela soit jouable, il te faudra une pincé de javascript pour tester lors du scroll de la page, la position du menu et de la retoucher le cas échéant.
	00

21/02/2011, 09h53	#3
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	Bah effectivement en CSS ça ne amrche pas, ça dépasse du TD quand meme. Tu sais comment je pourrais faire ça en JS ?
	00

22/02/2011, 09h38	#5
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	Bonjour et merci de ta réponse. Non ce n'est pas ça. Car selon la taille de l'écran, le positionnement du DIV change. et sur certains ecrans le div, en haut de page, est beaucoup trop haut et dépasse donc le fameux <TD>. (ça empiète sur le reste de la page :/) Effectivement je pense qu'il faut une petit touche de JS. J'ai essayé en relevant les coordonnées haut/gauche du div, pour ne pas qu'elles dépassent celles du <TD>. Mais ça marche pas je galère lol
	00

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