Vamos a hacer un típico efecto DHTML para conseguir que la cabecera de la página esté siempre visible. El objetivo es que la cabecera acompañe al scroll vertical de la página, para que siempre se vea en la parte de arriba.
La explicación es simple: Tenemos una cabecera que está situada en la parte de arriba de la página y al desplazar la página verticalmente, la cabecera debe ocupar automáticamente la posición inicial, en la parte de arriba, de modo que siempre esté visible.
El Javascript del ejemplo es muy sencillo, tal vez en lo que más empleemos tiempo es en crear el HTML y CSS necesarios para hacer la página de ejemplo.
El código HTML
Veamos el código HTML de este ejemplo. Tiene una serie de capas que vamos a posicionar inicialmente con CSS y luego dinámicamente con Javascript.
<body>
<div id=cabecera>
<div id=logo>TU LOGO</div>
<div id=enlaces>
Hola |
Enlace |
Recursos guays |
Mejoras de lo que sea |
Hoteles |
Ultimo link
</div>
</div>
<div id=contenido>
<h1>Título de la página</h1>
<p><b>Lo que vamos a ver aquí es una cabecera que siempre mantiene la posición en la parte de arriba de la página</b>. Es muy sencillo…
</p>
Lorem ipsum dolor…
</body>
</html>
Vemos que tiene dos partes fundamentales, por un lado la cabecera y por otro el contenido, que están colocados en dos capas independientes.
La cabecera a su vez tiene un espacio para el logotipo y un espacio para unos enlaces. Cada uno, para su ejemplo particular, pondrá tantos contenidos en la cabecera como necesite.
Por lo que respecta al contenido, es un simple texto. Sería un poco más largo de lo que hemos mostrado en el HTML anterior, porque tenemos que poner texto para que la página sea suficientemente larga como para que se pueda desplazar verticalmente.
El código CSS
Tenemos que aplicar estilos, con hojas de estilo, para que cada elemento se coloque en la posición adecuada y para que la cabecera tenga un color distinto del resto de la página y así destaque un poco.
BODY{
font-family: verdana, arial;
padding:0px;
margin:0px;
}
#cabecera {
position:absolute;
top:0px;
left:0px;
width: 100%;
height:20px;
background-color: #666666;
color: #ffcc88;
}
#logo{
float: left;
margin-left:2px;
font-weight: bold;
}
#enlaces{
float: right;
margin-right:4px;
}
#contenido{
margin: 30 5 10 5px;
}
Usuarios que han visto este tema también han visto...
- Diferencias entre Java y JavaScript
- MozAfterPaint, evento para controlar los cambios en la página
- Evitar el Reenvío de Formularios con JavaScript
- Ventas móviles con JavaScript
- Framework Mootools para JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.