Publicado em 24 de jul.

Como criar um topo fixo?

#desenvolvimento-frontend

Como criar um topo, com menu e tal, onde, quando der um scroll na página ele a acompanhe????

um exemplo é o site do facebook

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Marco Bruno· 24 de jul.

Bom dia, Marcelo Antonio_118277.

A parada é o position: fixed;, segue um exemplo abaixo:

<!DOCTYPE html>

<html>
<head>
	<title>Topo Fixo</title>
	<meta charset="UTF-8">

	<style>
 * { margin: 0; padding: 0; border: none; list-style: none; }

 body { color: #FFF;}

 header {
 width: 100%; min-width: 980px; height: 80px;
 border: 1px solid #333;
 background-color: red;
 position: fixed;
 top: 0;
 }

 article {
 min-width: 980px; height: 1200px;
 padding-top: 90px;
 background-color: blue;
 }

 footer {
 min-width: 980px; height: 180px;
 background-color: black;
 }
	</style>
</head>
<body>
	<header><h1>CSS Cabeçalho: position: fixed; top: 0; width: 100%;</h1></header>
	<article><h1>Conteúdo</h1></article>
	<footer><h1>Rodapé</h1></footer>
</body>
</html>

Qualquer dúvida da um grito ae!

Willian Makoto· 24 de jul.

desta forma não dá erro no IE7~8 ?

William Bruno· 24 de jul.

Para simular o "fixed" nos IEs antigos, você pode usar uma "gambiarra" com positions absolutes:

http://forum.imasters.com.br/topic/252392-simulando-position-fixed-ff-ie-opera/