Untitled

<!Doctype html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


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

#header{
width: 100%;
height: 200px;
background-color: orange;
}

#navigation{
position: absolute;
top: 200px;
width: 100%;
height: 45px;
background-color: green;
}

#navigation.fixed{
top: 0;
position: fixed;
width: 100%;
height: 45px;
background-color: green;
}


#nav-wrapper{
width: 1200px;
margin: 0 auto;
background-color:blue;
height: 45px;
}


#hiddenObject {
  display: none;
}


#Farbe1{
margin: 0;							/* 46px - Höhe der Nav + Höhe Header 250px = 296px */
width: 100%;
background-color:white;
height: 140px;
}

#Farbe1.fixed{
position: fixed;
top: 46px;								/* 46 px - Höhe Nav leiste */
width: 100%;
background-color:white;
height: 140px;
}

#tablenav{
position:relative;
}


.arrow{
display:none;
}

#desk1{
background-color: white;
}

#arrow2{
margin:0;
padding: 0;

}


@media screen and (max-width:1200px){
	#nav-wrapper{
	width: 950px;
	margin: 0 auto;
	}

@media screen and (max-width:1100px){
	#nav-wrapper{
	width: 900px;
	margin: 0 auto;
	}

@media screen and (max-width:900px){
	#nav-wrapper{
	width: 700px;
	margin: 0 auto;
	}

@media screen and (max-width:700px){
	#nav-wrapper{
	width: 100%;
	margin: 0 auto;
	}

	.arrow{
	display:inline;
	}

	#tablenav{
	display:none;
	}


@media screen and (max-width:500px){
	#nav-wrapper{
	width: 100%;
	margin: 0 auto;
	}

	#tablenav{
	display:none;
	}
	}


</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>
<div id="header">
Hallo!
</div>

<div id="navigation">
<div id="nav-wrapper">


<table id="tablenav" width="100%" height="45px">
<tr id="rownav">

	<td id="desk1">
	<a href="http://google.com"><center>Hallo</center></a>
	</td>

	<td id="desk2d" width="1px">
	<a href="http://facebook.com"><img id="handler" src="arrow.png"></a>
	</td>

	<td id="desk3">
	<center>Hallo</center>
	</td>

	<td id="desk4d" width="1px">
	<img id="arrow2" src="arrow.png">
	</td>

	<td id="desk5">
	<center>Hallo</center>
	</td>

	<td id="desk6d" width="1px">
	<img id="arrow2" src="arrow.png">
	</td>

	<td id="desk7">
	<center>Hallo</center>
	</td>

	<td id="desk8d" width="1px">
	<img id="arrow2" src="arrow.png">
	</td>

	<td id="desk9">
	<center>Hallo</center>
	</td>

	<td id="desk10d" width="1px">
	<img id="arrow2" src="arrow.png">
	</td>

</tr>

<table>

</div>
</div>


<div id="hiddenObject">
<div id="Farbe1">
<a href="http://Facebook.com">Email-Seite</a>
</div>
</div>


<div id="bodyspan">
<br><br><br><br><br>
WILLKOMMEN!!!


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Dicta, natus nostrum enim laboriosam, placeat inventore vitae
in libero dolore quas Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Officiis, aut. Distinctio vel, saepe ipsam
sapiente magnam consequatur quibusdam, porro ad inventore qui.
Distinctio hic placeat debitis quibusdam porro, ipsum aliquam?
tempore accusamus! Ad unde incidunt architecto vero beatae earum sequi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda totam quisquam, tenetur nobis incidunt adipisci
pariatur architecto, sit temporibus veritatis, cum voluptates.
Quaerat cum quam possimus perspiciatis non temporibus laboriosam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Vitae numquam amet consectetur labore optio corrupti porro magnam,
veniam corporis, aperiam blanditiis eum odio quia laborum at reprehenderit
accusamus facere autem!</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Dicta, natus nostrum enim laboriosam, placeat inventore vitae
in libero dolore quas tempore accusamus! Ad unde incidunt architecto
vero beatae earum sequi.</p>


</div>


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

document.addEventListener("scroll", function(e) {
	if (window.scrollY >= naviPosY){
		navi.className ="fixed";
		farbe.className ="fixed";
} else {
navi.className ="absolute";
farbe.className ="absolute";
}
});
</script>

</body>


</html>