Transparent Sticky Navigation

[Cℓoυd]

Hallo Leute! Ich arbeite gerade an einem neuen Projekt und mein Wissen begrenzt sich auf CSS, HTML und PHP. Ich versuche gerade eine Navigation wie im folgenden Wordpress Theme zu erstellen:

Das klappt soweit auch ganz gut mit dem Code, den ich mir bisher zusammengebastelt habe:

Allerdings stehe ich vor einem letzten Problem .. mit nav.style.color lässt sich die Farbe des Text ändern, kann mir jemand sagen wie ich die Farbe von Links ändern kann (inkl. hover / visited)?

Ich habe einiges dazu gefunden, aber leider keine Lösung ..

Weiterhin würde ich mich über Tips freuen, wenn ich mein Vorhaben mit der Navigation anders / besser lösen kann bzw. wenn man an meinem vorhanden Code etwas verbessern kann.

[False]

Originally Posted by Cℓoυd

Hallo Leute! Ich arbeite gerade an einem neuen Projekt und mein Wissen begrenzt sich auf CSS, HTML und PHP. Ich versuche gerade eine Navigation wie im folgenden Wordpress Theme zu erstellen:

Das klappt soweit auch ganz gut mit dem Code, den ich mir bisher zusammengebastelt habe:

Allerdings stehe ich vor einem letzten Problem .. mit nav.style.color lässt sich die Farbe des Text ändern, kann mir jemand sagen wie ich die Farbe von Links ändern kann (inkl. hover / visited)?

Ich habe einiges dazu gefunden, aber leider keine Lösung ..

Weiterhin würde ich mich über Tips freuen, wenn ich mein Vorhaben mit der Navigation anders / besser lösen kann bzw. wenn man an meinem vorhanden Code etwas verbessern kann.

Ich würde dir raten statt das ganze Styling im Javascript zu machen es im Css zu machen.

Sprich du stylst ganz normal mit einer Klasse (z.B. menu) dein Menü und sobald man scrollt fügst du eine Klasse hinzu (z.B. fixed) mit der du einfach das Fixed Styling nutzt.

Wenn du auf Google nach "css link color" suchst und auf den ersten Link () gehst findest du auch schon das passende CSS Styling für Links.

Sollte das noch zu schwer für dich sein, dann rate ich dir erstmal die Grundlagen von Html, Javscript und Css anzuschauen und zu lernen bevor du dich an dieses Projekt machst.

[Cℓoυd]

Originally Posted by False

Ich würde dir raten statt das ganze Styling im Javascript zu machen es im Css zu machen.

Sprich du stylst ganz normal mit einer Klasse (z.B. menu) dein Menü und sobald man scrollt fügst du eine Klasse hinzu (z.B. fixed) mit der du einfach das Fixed Styling nutzt.

Konnte mein Problem nun mit viel probieren, wie oben beschrieben lösen ..

<div class="navigation" id='nav'>

	<ul>	
		<li><a href="">Startseite</a></li>
		<li><a href="">Neuigkeiten</a></li>
		<li><a href="">Galerie</a></li>
	</ul>
</div>
<script type="text/javascript">
	var  nav = document.getElementById('nav');
	window.onscroll = function(){
		if (window.pageYOffset >1) {
			nav.classList.add('floating');
		} else {
			nav.classList.remove('floating');
		}
	}
</script>