# Scrollposition ermitteln



## fredolin (26. April 2013)

Hallo JavaScript Gruppe,

ich habe ein kleines Problem bei einer Webseite. 
Das Problem ist, das diese Seite einen recht großen Headerbereich hat und der ist transparent. Weiter unten wird die Seite weiss. Da der Header gefixed ist scrollt die Seite unter den Heder durch. Soll ja auch so seini. Nunist das aber so, das die Menupunkte nicht mehr zu sehen sind, wenn die weisse Seite hochscrollt.

Nun möchte ich das so machen, wenn man runterscrollt, das ab einer bestimmten Position (z.B ab 300 Pixel) dann die Navigationspunkte mit javascript und css in schwarz einfärbt.

So da ich aber bislang kenen ansatzpunkt gefunden habe wie ich das um setzen kann, hoffe ich hier, ob mir hier einer helfen kann oder Ansatzpunkte geben kann.

Codeauszug aus der Webseite

```
<header>
	<div class="header">
        	<div class="logo">
            	<div class="myLogo"></div>
            </div>
            <div class="clear"></div>
            <div class="topNav gray90">
                <ul class="topnavi">
                    <li><a href="<?php bloginfo('url') ?>/startseite">Startseite</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link1</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link2</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link3</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link4</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link5</a></li>
                </ul>
            </div>
        </div>
</header>
// der Header ist per CSS festgestellt (background-position:fixed)
// alles was im wrapper ist scrollt unter den Header
<div id="wrapper">
Inhalt der gesamten Webseite
</div>
```

Ich hoffe ich konnte mich verständlich mein Problem rüberbringen und freue mich, hier Hilfestellungen und Ansätze zu bekommen.

Danke in Vorraus für Eure Mithilfe

Gruß
Fredolin


----------



## tombe (26. April 2013)

Du kannst im body-Tag das onscroll-Ereignis einsetzen um eine Funktion auzurufen mit der du die Position ermitteln kannst.


```
function scrollpos() {
top = document.body.scrollTop;
left = document.body.scrollLeft;
}
```


```
<body onscroll="srcollpos()"></body>
```


----------



## fredolin (26. April 2013)

Hallo Tombe,

Dein Ansatz war schon OK.. aber für mein Problem denke da muss ich was berechnen und dann muss ich ja die css verändern.

Und das kann ich noch nicht so gut... Da fehlt mir die Praxis drinne..:-(

Gruß
Fredolin


----------



## tombe (26. April 2013)

Hat document.body.scrollTop den Wert 0 ist die Seite ganz oben und wenn dein Header 300 Pixel hoch ist, dann müssen die CSS Anpassungen eben ab dem Wert >= 300 greifen.


```
if (document.body.scrollTop >= 300) {
    document.getElementsById("abc").style.color = "#000000";
} else {
    document.getElementsById("abc").style.color = "#999999";
}
```

Da ich nicht genau weiß welche Elemente geändert werden sollen, ändere ich jetzt halt das Element mit der ID "abc".


----------



## fredolin (26. April 2013)

Hallo Tombe,

erstmal danke.. und ich hab deinen Ansatz mal übernommen.. Doch ich bekomme immer die Fehlermeldung

```
Fehler: TypeError: document.getElementsByID is not a function
```

Gruß
Fredolin


----------



## tombe (26. April 2013)

getElementById und nicht getElement*s*ById, dann sollte es klappen.


----------



## fredolin (26. April 2013)

Hallo Tombe,

habe ich auch gesehen und schon abgeändert.. Aber es klappt nicht wirklich.. 
hier nun den COde den ich aus dem was du mir gegeben hast gebastelt habe


```
function scrollpos() {
	top = document.body.scrollTop;
	//alert(top);
	if(document.body.scrollTop >= 450) {	
		document.getElementById("Navi").style.backgroundColor = "black";
	} else {
		document.getElementById("Navi").style.backgroundColor = "";	
	}
}

<body onscroll="scrollpos()">
 <div class="topNav gray90">
                <ul id="Navi" class="topnavi">
                    <li><a href="<?php bloginfo('url') ?>/startseite">Startseite</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Über Mich</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Berufsweg</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Ausbildungen</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Fortbildungen</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Mein Blog</a></li>
                </ul>
            </div>
```

Gruß
Fredolin


----------



## fredolin (26. April 2013)

Hallo Tombe,

habe ich auch gesehen und schon abgeändert.. Aber es klappt nicht wirklich.. 
hier nun den COde den ich aus dem was du mir gegeben hast gebastelt habe


```
function scrollpos() {
	top = document.body.scrollTop;
	//alert(top);
	if(document.body.scrollTop >= 450) {	
		document.getElementById("Navi").style.backgroundColor = "black";
	} else {
		document.getElementById("Navi").style.backgroundColor = "";	
	}
}

<body onscroll="scrollpos()">
 <div class="topNav gray90">
                <ul id="Navi" class="topnavi">
                    <li><a href="<?php bloginfo('url') ?>/startseite">Startseite</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link1</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link2</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link3</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link4</a></li>
                    <li class="navstrich">\</li>
                    <li><a href="<?php bloginfo('url') ?>/#">Link5</a></li>
                </ul>
            </div>
```

Gruß
Fredolin


----------



## tombe (26. April 2013)

"Navi" hat keine style-Angaben. Das Aussehen wird über die Klasse zugewiesen.

Erstelle eine weitere Klasse die das gewünschte Aussehen hat und mache aus


```
document.getElementById("Navi").style.backgroundColor = "black";
```


```
if(document.body.scrollTop >= 450) {    
    document.getElementById("Navi").className = "klasse1";
} else {
    document.getElementById("Navi").className = "klasse2";    
}
```


----------



## fredolin (29. April 2013)

Hallo Tombe,

erst mal Dankeschön für deine Mithilfe.. Das klappt echt super...
Doch wenn ich wieder runter scroll dann ändert sich die class nicht. Es bleibt auf der Class stehen, die ich im scrollTop lade.

Anschauen kann man sich das unter http://www.webslay.eu

Weiß du da eventuell ein Tip?

Grguß
Fredolin


----------



## tombe (1. Mai 2013)

Schau dir mal deine Funktion an dann solltest du selber drauf kommen.


```
// So sieht es bei dir aus
if( document.body.scrollHeight > 500 ) {
    document.getElementById("topNavi").className = "scrollactiv";
} else if( document.body.scrollTop == 0) {
    document.getElementById("topNavi").className = "topNav";
}

// und so sollte es aussehen
if( document.body.scrollTop > 500 ) {
    document.getElementById("topNavi").className = "scrollactiv";
} else {
    document.getElementById("topNavi").className = "topNav";
}
```

Du prüfst einmal den Wert scrollHeight und das andere mal scrollTop (wobei dies der richtige Wert ist).

Außerdem darfst du nicht prüfen ob du wieder bei 0 angekommen bist. Es ist nur zu prüfen ob der Wert größer 500 ist, dann wird die Klasse geändert andernfalls wird wieder die ursprüngliche Klasse eingesetzt.


----------



## fredolin (2. Mai 2013)

Hallo Tombe,

ja es klappt.. und danke viel mals.. ja man sollte schon das schrreiben was hier an Hilfestellung gepostet wird.. Da war mein Fehler. Aber ich bedanke mich sehr für deine Hilfe.. Aber ich benötige deine Hilfe für noch ein Script.

Wie du gesehen hat, versteckt sich ein DIV Container, wenn ich mit der Mause in meinem Kontent fahre.
So weit habe ichdas auch hin bekommen. Aber nun möchte ich, das wenn die sliderbox sich versteckt (fadeOut) eine leere Box einblende, damit mein Kontent an der Position bleibt wo er steht, wenn die Sliderbox sicht bar ist.

Hier mal mein Code

```
$('.sliderbox').hide();
	  function hideDiv() {
		$('.sliderbox').fadeOut(3500);
		document.getElementById('mainbox').className = "mainContent";
		//clearTimeoutId = 0;  
	  }
	  
	  $('#wrapper').mousemove(function() { 
		$('.sliderbox').fadeIn(3500);
		document.getElementById('mainbox').className = "maincontent";
	  });
	  
	  
	  $('#header').mousemove(function() {
		hideDiv(); 
	  });
```

Ich weiß das ich mkit einem Functionsaufruf dann das document element einbinden kann. Aber ich weiß nicht wie. So gut sind meine Kenntnisse noch nicht.

Viele Grüße
Fredolin


----------



## tombe (2. Mai 2013)

Sorry ich versteh nicht so wirklich was du machen willst.

Du solltest dir aber vielleicht erstmal die Menüs selber vornehmen. Wenn ich z.B. zuerst "Referenzen" anklicke und dann "Scriptsammlung" dann bleibt das erste Menü offen und das zweite (und alle weiteren) werden darunter eingeblendet. Das soll doch sicher nicht so sein oder!?

Beschreibe bitte nochmal ein bisschen genauer was im Moment passiert und was passieren soll.

Gruß Thomas


----------



## fredolin (2. Mai 2013)

Hallo Thomas,
im Moment läuft da nichts. Ich weiß nicht was ich getan habe, aber seit heute Mittag macht sogar dein Script für die Navigation , wo ich die Hintergrundfarbe wechseln soll, nichts.

Das schöne ist, ich habe alle anderen JS und jQuerys heraus genommen.. Nur dein Script ist in der Seite drinne und es läuft nicht?.. Bin nun etwas Ratlos..


Puh.. hab das mit der Hintergrundfarbe erstmal so gelöst, wobei ich nundas Problem hab, wenn man zurück scrollt, das dann die andere CLasse nicht genommen wird bzw, weiß nicht wie ich das da einbinden kann.

Hier mal mein Code

```
$(window).scroll(function() {
	$('#topNavi').addClass("scrollactiv");
});
```

Zu dem anderen, was mit der Navigation ist, ja da werde ich mich noch dran machen müssen, denn es sollte eigentlich so sein, wenn ich auf den ersten Link (Über Mich) klicke dann sollte das Untermenu herausfahren. Klicke ich dann auf Referenzen, dann sollte das Untermeue von Über mich einfahren und das Untermeue von Referenzen soll heraus fahren. So war das gedacht..

Und mit dem Ausfaden und Einfaden der Sliderbox, wo der Inhalt aber an der gleichen Stelle bleiben soll, muss ich auch noch mal schauen wie das geht. denn der Inhalt soll nicht hoch und runterspringen sonder das Bild soll da frei zu sehen sein.

Aber ich merke, Baustelle über Baustelle noch..
Wenn einer mir hilft, die Scripte so an zu passen oder Hilfestellunge gibt, ich bin jeden sehr dankbar..

Gruß
Fredolin

Gruß
Fredolin


----------

