<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Menu fijo en la parte superior</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
* {
margin:0px;
}
header {
position:fixed;
background-color:#ccc;
width:100%;
z-index:10;
height:80px;
}
header h1 {
margin:0px;
padding:5px 20px;
overflow:hidden;
height:37px;
}
nav {
background-color:#ccc;
}
nav ul {
list-style:none;
padding:0px;
margin:0px;
height:30px;
overflow:hidden;
}
nav ul li {
float:left;
padding:5px 10px;
font-weight:bold;
}
nav ul li a {
text-decoration:none;
color:#00f;
}
content {display:block;}
content p {padding:10px 5px;}
</style>
<script>
$(document).ready(function(){
// cada vez que se mueva el scroll del navegador se ejecutara
// este evento
$(document).scroll(function(){
// si la posicion del scroll es superior a 55 pixels...
if($(window).scrollTop()>45)
{
// indicamos que el header tiene una posicion fija a -47 pixels
$("header").css({"position":"fixed", "top":-47});
// definimos el margen superior al contenido cuando queda fijado
$("content").css({"margin-top":80});
}else{
$("header").css({"position":"inherit", "top":"inherit"});
$("content").css({"margin-top":0});
}
});
});
</script>
</head>
<body>
<header>
<h1>Menu fijo en la parte superior</h1>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
<ul>
</nav>
</header>
<content>
<p>contenido de ejemplo1</p>
<p>contenido de ejemplo2</p>
<p>contenido de ejemplo3</p>
<p>contenido de ejemplo4</p>
<p>contenido de ejemplo5</p>
<p>contenido de ejemplo6</p>
<p>contenido de ejemplo7</p>
<p>contenido de ejemplo8</p>
<p>contenido de ejemplo9</p>
<p>contenido de ejemplo10</p>
<p>contenido de ejemplo11</p>
<p>contenido de ejemplo12</p>
<p>contenido de ejemplo13</p>
<p>contenido de ejemplo14</p>
<p>contenido de ejemplo15</p>
<p>contenido de ejemplo16</p>
<p>contenido de ejemplo17</p>
<p>contenido de ejemplo18</p>
<p>contenido de ejemplo19</p>
<p>contenido de ejemplo20</p>
<p>contenido de ejemplo21</p>
<p>contenido de ejemplo22</p>
<p>...</p>
</content>
</body>
</html>