Untitled

<!Doctype html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">
body {
	margin: 0;
  background-color: red;
}


header{
background-color:orange;
height: 80px;
}

#platzhalter{
position: absolute;
top: 150px;
width: 1000px;
height: 2000px;
}

#navibereich li{
display: inline; /* Listenelement nebeneinander */
list-style-type: none; /* keine Aufzählungspunkte */
}


#navibereich{
margin: 0;
background-color:green; 			/* Hintergrundfarbe Navigationsbereich */
padding: 10px 100px; 				/* oben/unten # px - re/li 0  */
border-top: 3px solid white; 		/* Rahmen oben */
border-bottom: 3px solid white;		/* Rahmen unten */
margin: 0px; 						/* Außenabstand  */
}


#navibereich a{
color: white;						/* Schriftfarbe */
text-decoration: none;				/* Keine Unterstreichung */
padding: 10px 8px;					/* oben unten 4px; re/li 8px */
}

#navibereich a:hover{				/* Farbveränderung, wenn Maus */
background-color: blue;
}


#navigation.fixed{
	position:fixed;
	background-color: blue;
	top:0;
	height:40px;
	color:white;
	}


#navigation{
	position:absolute;
	background-color:blue;
	width: 100%;
	height: 40px;
	color:white;
}


#hiddenObject {
display:none
}

#Farbe1{
background-color:white;
width: 100%;
height: 100px;
}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).on('click', '#handler', function(e) {
	e.preventDefault();
	if (!$(this).hasClass('active')) {
  	$('#hiddenObject').show();
  } else {
  	$('#hiddenObject').hide();
  }

  $(this).toggleClass('active');
});
</script>

</head>


<body>

<header>
Hallo! servas korli
</header>


<div id="body2">


</div>

<div id="platzhalter">

</div>

<div id="navigation">
<ul id = "navibereich">
	<li id="navi01"><a id="handler" href="http://google.com">Startseite</a></li>
	<li id="navi02"><a href="#">Kontakt</a></li>
</ul>

<div id="hiddenObject">
<div id="Farbe1">
<a href="http://google.com">Servas</a>
</div>
</div>
</div>


<script type="text/javascript">
var navi = document.getElementById("navigation");
var naviPosY = navi.offsetTop;

document.addEventListener("scroll", function(e) {
	if (window.scrollY >= naviPosY){
		navi.className ="fixed";

} else {
navi.className ="absolute";
}
});

</script>

</body>

</html>