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

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

div qui suit le scroll sans depasser hauteur div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager