DIV mobile suivant le scroll

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

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

dans les css tu as la propriété

Code:

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:

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

Bonjour
essaye plutôt:
Code:

1 2 position:fixed;
A+

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:

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:

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>

Parfait merci beaucoup! Problème résolu! :)