marcelloinfoweb · November 4, 2014 02:11
diff --git a/menuFixo.html b/menuFixo.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title></title>
 	<link rel="stylesheet" href="">
 	<script src="jquery-1.11.1.min.js"></script>
 	<style>
 		body {
 			margin: 0;
 			padding: 0;
 			font-family: tahoma;
 			height: 1600px;
 			background-color: #f5f5f5;
 		}

 		#top {
 			width: 960px;
 			height: 150px;
 			margin: 0 auto;
 		}
 		#top img {
 			margin-top: 30px;
 		}
 		#menuHeader {
 			position: relative;
 			width: 100%;
 			height: 50px;
 			background-color: #2D3F50;
 		}
 		#menuHeader ul {
 			width: 960px;
 			margin: 0 auto;
 			list-style: none;
 		}
 		#menuHeader ul li {
 			float: left;
 		}
 		#menuHeader ul li a {
 			padding: 15px 30px;
 			line-height: 50px;
 			border-left: 1px solid #464A4E;
 			border-right: 1px solid #0E3457;
 			text-decoration: none;
 			color: #fff;
 		}
 		#menuHeader ul li:first-child a {
 			border-left: 0;
 		}
 		#menuHeader ul li:last-child a {
 			border-right: 0;
 		}
 		#menuHeader ul li a:hover {
 			background-color: #4aa6e0;
 		}
 		.fique-olho {
 			position: absolute;
 			width: 300px;
 			top: 50px;
 			left: 20%;
 		}
 		.seta-down {
 			position: absolute;
 			width: 400px;
 			bottom: 0;
 			left: 40%;
 		}
 		.fim {
 			position: absolute;
 			width: 300px;
 			bottom: -650px;
 			left: 40%;
 		}
 		.menu-fixo  {
 		    position:fixed !important;
 		    top: 0;
 		    z-index: 99;
 		}
 	</style>

 	<script>
 		$(function(){   
 			var nav = $('#menuHeader');   
 			$(window).scroll(function () { 
 				if ($(this).scrollTop() > 150) { 
 					nav.addClass("menu-fixo"); 
 				} else { 
 					nav.removeClass("menu-fixo"); 
 				} 
 			});  
 		});
 	</script>
 </head>
 <body>
 	<header>
 		<div id="top">
 			<img src="logo.png" alt="">
 		</div>
 		<nav id="menuHeader">
 			<ul>
 				<li><a href="#">Home</a></li>
 				<li><a href="#">Produtos</a></li>
 				<li><a href="#">Lojas</a></li>
 				<li><a href="#">Empresa</a></li>
 				<li><a href="#">Contato</a></li>
 			</ul>
 			<img class="fique-olho" src="fique-olho.png" alt="">	
 		</nav>
 	</header>
 	<div class="content">
 		<img class="seta-down" src="seta-down.png" alt="">	
 		<img class="fim" src="fim.png" alt="">	
 	</div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="jquery-1.11.1.min.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	font-family: tahoma;
	height: 1600px;
	background-color: #f5f5f5;
	}

	#top {
	width: 960px;
	height: 150px;
	margin: 0 auto;
	}
	#top img {
	margin-top: 30px;
	}
	#menuHeader {
	position: relative;
	width: 100%;
	height: 50px;
	background-color: #2D3F50;
	}
	#menuHeader ul {
	width: 960px;
	margin: 0 auto;
	list-style: none;
	}
	#menuHeader ul li {
	float: left;
	}
	#menuHeader ul li a {
	padding: 15px 30px;
	line-height: 50px;
	border-left: 1px solid #464A4E;
	border-right: 1px solid #0E3457;
	text-decoration: none;
	color: #fff;
	}
	#menuHeader ul li:first-child a {
	border-left: 0;
	}
	#menuHeader ul li:last-child a {
	border-right: 0;
	}
	#menuHeader ul li a:hover {
	background-color: #4aa6e0;
	}
	.fique-olho {
	position: absolute;
	width: 300px;
	top: 50px;
	left: 20%;
	}
	.seta-down {
	position: absolute;
	width: 400px;
	bottom: 0;
	left: 40%;
	}
	.fim {
	position: absolute;
	width: 300px;
	bottom: -650px;
	left: 40%;
	}
	.menu-fixo {
	position:fixed !important;
	top: 0;
	z-index: 99;
	}
	</style>

	<script>
	$(function(){
	var nav = $('#menuHeader');
	$(window).scroll(function () {
	if ($(this).scrollTop() > 150) {
	nav.addClass("menu-fixo");
	} else {
	nav.removeClass("menu-fixo");
	}
	});
	});
	</script>
	</head>
	<body>
	<header>
	<div id="top">
	<img src="logo.png" alt="">
	</div>
	<nav id="menuHeader">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Produtos</a></li>
	<li><a href="#">Lojas</a></li>
	<li><a href="#">Empresa</a></li>
	<li><a href="#">Contato</a></li>
	</ul>
	<img class="fique-olho" src="fique-olho.png" alt="">
	</nav>
	</header>
	<div class="content">
	<img class="seta-down" src="seta-down.png" alt="">
	<img class="fim" src="fim.png" alt="">
	</div>
	</body>
	</html>