# Abfragen ob Element im sichtbaren Bereich



## SuperSonik (25. März 2008)

Hallo Leute,
ich habe die Aufgabe ein Werbebanner zu programmieren welches per Javascript immer
auf der rechten Seite im Browserfenster "mitläuft". Spricht das Banner muss sich beim herunter scrollen mitbewegen. 
Leider darf ich den Banner nicht einfach mit CSS position:fixed positionieren.
(Für eine Begründung fragt am besten meinen Chef ....  )
Hat da jemand einen Tipp wie man so etwas macht. Ich bin leider nicht so fit in JS
da ich sonst eigentlich immer in PHP programmiere.
Ich habe vor allem ein Problem mit den Eventhandlern. Irgendwie scheint da keiner so richtig zu passen. Meine Idee ist jetzt das den body-tag mit einem onmouseover zu versehen und 
in der Funktion dann abzufragen ob der Banner (bzw. die div-Box des Banners) noch im sichtbaren Bereich ist. 
Kann man abfragen ob ein Element noch im sichtbaren Bereich ist. Ich meine damit nicht die 
Eigenschaft visibility, wenn ich das richtig verstanden habe gibt die ja nur an ob ein Element 
überhaupt angezeigt wird.
Vielen Dank schon mal. Gruß,
                          SuperSonik


----------



## Sven Mintel (25. März 2008)

Moin,

Dafür gibt es keine Eigenschaft, die du Auslesen kannst, du kannst jedoch die Eigenschaften scrollTop bzw. Scrollleft ermitteln und darüber die benötigte Position des Banners errechnen.

Als Eventhandler würde ich den onscroll-Event empfehlen(dieser muss für *window *notiert werden, nicht für den body)


----------



## SuperSonik (25. März 2008)

Ich habe jetzt die ganze zeit rum experimentiert. Im Firefox tut's das jetzt auch, aber weder im IE 6 noch 7. 
Hier mal mein Code:


```
<script type="text/javascript">
			function getY() {
				if (self.pageYOffset) // all except Explorer
				{	
					y = self.pageYOffset;
				}
				else if (document.documentElement && document.documentElement.scrollTop)
				// Explorer 6 Strict
				{
					y = document.documentElement.scrollTop;
				}
				else if (document.body) // all other Explorers
				{
					y = document.body.scrollTop;
				}
	
				return(y);	
			}
			function banner_move()
    		{
    			var y = getY();
    			if(y <= (window.outerHeight-100))
    			{
    			document.getElementById("adbanner").style.top = y  +"px";
    			}
    			setTimeout("banner_move()", 20);
    		}
			function init()
    		{
    			window.onscroll= banner_move();
			}
		</script>
```

Und dann im body Tag noch: 
	
	
	



```
onload="init();"
```



> (dieser muss für window notiert werden, nicht für den body)


Kannst Du mir das noch etwas genauer erklären? Ich glaube das dort der Hund begraben ist.
Danke und Gruß,
                  Sonik


----------



## Quaese (25. März 2008)

Hi,

sieht doch schon gut aus, was du geschrieben hast. Mit ein paar kleinen Änderungen sollte dein Vorhaben umzusetzen sein.

Zunächst wird eine Funktion ohne Klammern an einen Event zugewiesen.

```
window.onscroll= banner_move;
```
Die Funktion *banner_move* muss nicht mehr periodisch aufgerufen werden, da sie durch das *onscroll*-Ereignis ohnehin aufgerufen wird. Weiterhin ist die if-Bedinung in der Funktion überflüssig.

Mein Vorschlag:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#adbanner{ position: absolute;
         top: 10px;
         right: 10px;
         border: 5px solid #ccc;
         background: #000;
         color: #efefef;
         padding: 6px;}
 //-->
</style>
<script type="text/javascript">
<!--
function getY() {
  if (self.pageYOffset) // all except Explorer
  {
    y = self.pageYOffset;
  }
  else if (document.documentElement && document.documentElement.scrollTop)
  // Explorer 6 Strict
  {
    y = document.documentElement.scrollTop;
  }
  else if (document.body) // all other Explorers
  {
    y = document.body.scrollTop;
  }

  return(y);
}
function banner_move()
  {
    var y = getY();

    document.getElementById("adbanner").style.top = y  +"px";
  }

function init()
  {
    window.onscroll= banner_move;
}
//-->
</script>
</head>
<body onload="init();">
  <div id="adbanner"></div>
  <div style="height: 2000px;">HöhenDiv</div>
</body>
</html>
```
Ciao
Quaese


----------

