Scrollposition ermitteln

F

fredolin

Erfahrenes Mitglied
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
PHP: 
<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
 
Du kannst im body-Tag das onscroll-Ereignis einsetzen um eine Funktion auzurufen mit der du die Position ermitteln kannst.

Javascript: 
function scrollpos() {
top = document.body.scrollTop;
left = document.body.scrollLeft;
}
HTML: 
<body onscroll="srcollpos()"></body>
 
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
 
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.

Javascript: 
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".
 
Hallo Tombe,

erstmal danke.. und ich hab deinen Ansatz mal übernommen.. Doch ich bekomme immer die Fehlermeldung
PHP: 
Fehler: TypeError: document.getElementsByID is not a function

Gruß
Fredolin
 
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

PHP: 
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
 
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

PHP: 
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
 
"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

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

Javascript: 
if(document.body.scrollTop >= 450) {    
    document.getElementById("Navi").className = "klasse1";
} else {
    document.getElementById("Navi").className = "klasse2";    
}
 
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
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück