Archivlink: javarea.de Forum > JavaScript > mitscrollender Floater-Div in Inner.Div
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > mitscrollender Floater-Div in Inner.Div

Pages: [1]

geschrieben von derSteffen am 14.02.2008 - 10:39
Hallo,

ich hatte bisher immer ein Script laufen, mit der ich einen Bereich (div.floater) beim scrollen einer Seite mitlaufen lassen konnte.
Dieses Script hat immer die window.innerHeight genutzt um den aktuellen Viewport auszulösen.
Jetzt möchte ich aber gerne diesen floater in einem Div (div.text) setzten. dieser div.text hat eine feste Höhe von 40%. Wenn ich in diesem Div nun scrolle bleibt der Floater aber wie eingemeißelt auf seiner Position, da sich ja der ViewPort nicht ändert.
Nun suche ich eine Möglichkeit, dass mein Floater auch iin dem Div.text funktioniert und mit runterscrollt.

Ich bin mir auch nicht sicher ob eines dieser Zauberwörter weiterhilft: "div.offsetHeight" oder "scrollHeight". Ich habe das auch scon mal anstatt "window.innerHeight" ausgetauscht, hat aber leider keinen Erfolg gebracht.

Vielleicht könnte mir jemand weiterhelfen, dafür wäre ich sehr dankbar.

Anbei das Originalscript:

HTML-Quelltext
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: 
wmtt = null;

document.onmousemove = updateWMTT;

function updateWMTT(e) {
	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
	if (wmtt != null) {
		wmtt.style.left = (x + 20) + "px";
		wmtt.style.top 	= (y + 20) + "px";
	}
}

function showWMTT(id) {
	wmtt = document.getElementById(id);
	wmtt.style.display = "block"
}

function hideWMTT() {
	wmtt.style.display = "none";
}

/* FloaterScript (c) Sandra Wiegard 2002 */

var floater;
var theTop = 10;
var old = theTop;


function init()
{
	floater = new getObj('floater');
	movefloater();
}


function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
	this.obj = getObjNN4(document,name);
	this.style = this.obj;
  }
}


function movefloater()
{
	/** Abstand zum Dokumentanfang ermitteln *********************************/
	if (window.innerHeight)					// Netscape 4.x
	{	pos = window.pageYOffset}
	
	else if (document.documentElement && document.documentElement.scrollTop)
	{	pos = document.documentElement.scrollTop}
	
	else if (document.body)					// IE
	{	pos = document.body.scrollTop}

	if (pos < theTop) pos = theTop;
	else pos += 10;

	if (pos != old)
	{
		/** Immer kleine werdende Schritte definieren **/
		pos = (.1 *(pos-old))+old;
		floater.style.top = pos + "px";
	}
	
	old = pos;
	temp = setTimeout('movefloater()',10);
}


und der dazugehörige CSS

HTML-Quelltext
1: 
2: 
3: 
#floater {width:95%; height:50px; top:10px; z-index:100; position:absolute;}

div.text {height:40%; overflow:auto; }


Vielen Dank schon mal.

MfG Steffen

geschrieben von derSteffen am 20.02.2008 - 09:43
Hat vielleicht noch jemand eine Idee?

Danke


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.