DIV mobile suivant le scroll

**DrE44** · 30/07/2007, 23h31

Bonjour,

c'est une question assez débutante mais j'ai tout de même de la misère à trouver réponse a ma question.

Je voudrais simplement avoir un div qui suivrait le scroll dans ma page. Par exemple mon bouton "Create" suivrait meme si je descent dans la page...Tout ca pour éviter à l'usager de ne pas avoir a rescroller vers le haut pour aller cliquer sur le bouton...Est-ce que quelqu'un à une idée comment faire ça ?

Merci

**Grummfy** · 31/07/2007, 00h12

hello,
c'est plus du css que du javascript.

dans les css tu as la propriété

Code :

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

position: absolute;

qui te permettras de fixé la position d'un bloc (ici ton div), en t'aidant des propriété left et top, par exemple, afin de le positionner sur la page

exemple :
toujours en haut à gauche (avec un décallage de 10pixels)

Code :

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

1
2
3
position:absolute;
left: 10px;
top:0;

cependant rien ne t'empèche de modifier les propriété de style de ton div avec du javascript

**enok37** · 31/07/2007, 13h00

Bonjour
essaye plutôt:

Code :

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

1
2
 
position:fixed;

A+

**SpaceFrog** · 31/07/2007, 13h03

positon fixed n'est pas crossbrowser...
mais cela relève en effet plus du css que du javascript, bien qu'il soit possible de faire suivre le top du div sur le scroll de la page ... mais visuellement ce n'est pas le top, le mouvement est haché ...
voici plutot ce que je conseillerais :

<html>
<head>
<title>Mon bouton mouvant</title>

Code :

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
37
38
39
<style type="text/css">
body         { overflow: hidden; 
               margin: 0px }
#menu        { position: absolute;
               top: 10px;
               left: 0px;
               width: 200px;
               text-align: center; 
               border: 1px solid green;
               background-color:white; }
</style>
</head>
<body>
<div id="menu">
TITRE 1<br/>
 sous titre 1.1<br/>
 sous titre 1.2<br/>
<br/>
 TITRE 2<br/>
 sous titre 2.1<br/>
 sous titre 2.1<br/>
</div>
<div id="cont" style="width:100%; height:100%; overflow:auto;">
<div style="height:1200px;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>WEB SITE TITLE</h1>
<p>Scroll Up and down.</p>
</div>
</div>
</body></html>

la solution javascript étant nettement mois esthétique au niveau du déplacement:

Code :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head> 
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystyles/inout.css"> 
<title></title>
<script>
<!--
ie4=document.all
ns4=document.layers
 
function stayupthere() {
if (ie4) {
  monmenu.style.pixelTop=document.body.scrollTop ; 
  }
else if (ns4) {
  eval(document.monmenu.top=eval(window.pageYOffset));
  }
if(ie4 || ns4){
  setTimeout("stayupthere()",1);
  }
 
}
window.onscroll = stayupthere;
//-->
</script>
 
 </HEAD> 
<BODY  bgcolor="#FFFFFF" topmargin="0" leftmargin="0" > 
 
<div id="monmenu" style="position:absolute; width:92px; height:115px; z-index:2; left: 0px; top: 0px; visibility: show" >
<table  bordercolorlight="#009ED2" border="1" bordercolordark="#000099" bordercolor="#33CCFF" cellspacing="0" >
<TR> 
<TD class="out" height="25px" width="100px" onmouseover="this.className='in'" onmouseout="this.className='out'" align="center" ><b>Menu 1
    </b></TD> 
</tr>
<tr>
<TD class="out" height="25px"  width="100px" onmouseover="this.className='in'" onmouseout="this.className='out'" align="center"><b>Menu 2</b></TD> 
</tr>
<tr>
<TD class="out" height="25px" width="100px" onmouseover="this.className='in'" onmouseout="this.className='out'" align="center"><b>Menu 3</b></TD> 
</tr>
<tr>
<TD class="out" height="25px" width="100px" onmouseover="this.className='in'" onmouseout="this.className='out'" align="center"><b>Menu 4</b></TD> 
</TR> 
 
</table>
</div>
<b>ùmlkù</b>
<p><b>sfgdfg</b></p>
<p><b>df</b></p>
<p>&nbsp;</p>
<p><b>dfg</b></p>
<p>&nbsp;</p>
<p><b>fd</b></p>
<p><b>g</b></p>
<p><b>sdfg</b></p>
<p><b>sdg</b></p>
<p>&nbsp;</p>
<p><b>sg</b></p>
<p><b>dfg</b></p>
<p>&nbsp;</p>
<p><b>dfg</b></p>
<p><b>sd</b></p>
<p><b>g</b></p>
<p><b>sdg</b></p>
<p>&nbsp;</p>
<p><b>sdg</b></p>
<p>&nbsp;</p>
<p><b>sg</b></p>
<p><b>sdg</b></p>
<p>&nbsp;</p>
<p><b>sfg</b></p>
<p><b>sfd</b></p>
<p><b>gsd</b></p>
<p><b>gsdg</b></p>
<p><b>dg</b></p>
<p><b>df</b></p>
<p><b>g</b></p>
<p><b>fdgssd</b></p>
 
</BODY>

**DrE44** · 31/07/2007, 15h50

Parfait merci beaucoup! Problème résolu!

DIV mobile suivant le scroll

JavaScript

Vue hybride

Discussions similaires

Partager

Partager