Discussion :

[guillaume2vo]

bonjours,

je suis en train de faire ce site internet

http://dovelakeglobal.com/test.html

cependant le mouvement du menu que j'ai crée ne fait pas ce que je veut faire.

ce que je veut faire est.

quand je descends, le menu sur la page, soit, il suit l'image, puis des que l'image n'est plus afficher qu'il y est un espace de 10px

je met des image explicatif.

page d'ouverture
http://dovelakeglobal.com/1.JPG

et les images quand on descend la page
http://dovelakeglobal.com/2.JPG

et le bas de page
http://dovelakeglobal.com/3.JPG


comment je peut faire cela, cela fait 2 jour que je bat sur ce problème..


voici le code

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
  <div id="sidebar1">
<div id="divTopLeft"     style="position:absolute;">
 
<ul id="navmenu">
      <li><a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;HOME PAGE</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Children's Page</a>
      <ul>
      	 <li><a href="#">Children Of Dove Lake</a></li>
          <li><a href="#">Pen Pals</a></li>
           <li><a href="#">Smiles & Fun Page</a></li>
           </ul>
      </li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Housing</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Education</a>
        <ul>
          <li><a href="#">School</a></li>
          <li><a href="#">Vocational Training</a></li>
          <li><a href="#">Recreation</a></li>
        </ul>
      </li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Spiritual Center</a>
        <ul>
          <li><a href="#">Culture</a></li>
        </ul>
      </li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Clinic</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Farm</a>
        <ul>
          <li><a href="#">Agriculture</a></li>
          <li><a href="#">Aquaculture</a></li>
          <li><a href="#">Processing</a></li>
        </ul>
      </li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Business Center</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Hotel</a>
      <ul>
          <li><a href="#">Conventions / Meetings</a></li>
          <li><a href="#">Holidays</a></li>
          <li><a href="#">SPA / Wellness Center</a></li>
        </ul>
      </li>
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Energy</a>
        <ul>
          <li><a href="#">Wind</a></li>
          <li><a href="#">Solar</a></li>
          <li><a href="#">Alternative Energy Research Lab</a></li>
        </ul>
      </li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Health / Nutrition</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Amenities</a>
        <ul>
          <li><a href="#">x-1</a></li>
          <li><a href="#">x-2</a></li>
          <li><a href="#">x-3</a></li>
        </ul>
      </li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Employment / Volunteers</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Events</a>
        <ul>
          <li><a href="#">Holidays</a></li>
          <li><a href="#">Entertainment</a></li>
        </ul>
      </li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Gift Store</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Dream Page</a></li>
      <li><a href="SendMail.html">&nbsp;&nbsp;&nbsp;&nbsp;Contact Info</a></li>
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Recommended Sites</a></li>
    </ul>
 
 
 
 
 
  </div>
 
  </div>
 
 
<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
	var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
	var px = document.layers ? "" : "px";
	window[id + "_obj"] = el;
	if(d.layers)el.style=el;
	el.cx = el.sx = sx;el.cy = el.sy = sy;
	el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
 
	el.floatIt=function()
	{
		var pX, pY;
		pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
		document.documentElement && document.documentElement.clientWidth ? 
		document.documentElement.clientWidth : document.body.clientWidth;
		pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
		document.documentElement.scrollTop : document.body.scrollTop;
		if(this.sy<0) 
		pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
		document.documentElement.clientHeight : document.body.clientHeight;
		this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
		this.sP(this.cx, this.cy);
		setTimeout(this.id + "_obj.floatIt()", 40);
	}
	return el;
}
JSFX_FloatDiv("divTopLeft", 0,0).floatIt();
</script>
<!-- ********************************************************* -->
</div>

[Invité]

bonjour

il faudrait que le deplacement du menu commence a partir du moment ou la position du scroll soit egale a la position de demmarage -10px du menu le 10 etant la marge

Code :

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

1
2
3
if(document.body.scrollTop>=document.getElementById('monmenu').offsetTop-10){
ici se trouve la fonction pour le menu
}

[guillaume2vo]

re-bonjours

je vient de faire la modifications que vous m'avez donné.
cependant cela ne fonctionne toujours pas, sauf si j'ai mal comprit, car je jacascript, n'est vraiment pas ma tasse de thé.

voici ce que j'ai fait suite a votre aide

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
 
<script type="text/javascript">
if(document.body.scrollTop>=document.getElementById('divTopLeft').offsetTop-10)
{
 
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;
el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
document.documentElement && document.documentElement.clientWidth ? 
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0) 
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;
this.cy += (pY + this.sy - this.cy)/800;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
 
JSFX_FloatDiv("divTopLeft", 0,0).floatIt();
 
}
</script>
<!-- ********************************************************* -->

[Invité]

en imaginant la fonction la plus simple sa donne ca

Code :

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

1
2
3
4
5
6
 
function depl (){
if(document.body.scrollTop>=document.getElementById('monmenu').offsetTop-10){
document.getElementById('monmenu').style.top=document.body.scrollTop
}
}

la fonction se declenche par l'ajout de l'evenement onscroll

[guillaume2vo]

eh bé, je ne comprend pas grand chose a cela, je vais essayer de bidouiller
comme, je commence en JS c pas aussi facile par rapport au php

[guillaume2vo]

en bidouillant, j'ai presque réussis a faire ce que je voulais faire, mais
le menu monte plus vite que l'assenseeur descend, et il ne stop pas a la hauteur de 10px

voici ce que j'ai modifier

Code :

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

1
2
 
this.cy -= (pY - this.sy + this.cy)/8;

comment je peut faire, car que ce mekal m'a fournis, je n'ai pas sus l'appliquer.

voici ce que cela donne http://www.dovelakeglobal.com