Cabeçalho sempre visível com Javascript DHTML

Script realizado com Javascript e DHTML para que o cabeçalho sempre esteja visível na parte de cima da página, mesmo que se faça scroll ou deslocamento na página.

Vamos fazer um típico efeito DHTML para conseguir que o cabeçalho da página esteja sempre visível. O objetivo é que o cabeçalho acompanhe ao scroll vertical da página, para que sempre se veja na parte de cima.

A explicação é simples: Temos um cabeçalho que está situado na parte de cima da página e ao deslocar a página verticalmente, o cabeçalho deve ocupar automaticamente a posição inicial, na parte de cima, de modo que sempre esteja visível.

Visualizando o exemplo em funcionamento teremos uma idéia precisa do que vamos realizar.

O Javascript do exemplo é muito simples, talvez no que mais empreguemos tempo é em criar o HTML e CSS necessários para fazer a página de exemplo.

O código HTML

Vejamos o código HTML deste exemplo. Tem uma série de camadas que vamos posicionar inicialmente com CSS e logo dinamicamente com Javascript.

<body>
<div id=cabecalho>
   <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=conteudo>
<h1>Título da 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 tem duas partes fundamentais, por um lado o cabeçalho e por outro o conteúdo, que estão colocados em duas camadas independentes.

O cabeçalho por sua vez tem um espaço para o logotipo e um espaço para uns links. Cada um, para seu exemplo particular, colocará tantos conteúdos no cabeçalho quantos necessite.

Quanto ao conteúdo, é um simples texto. Seria um pouco mais longo do que mostramos no HTML anterior, porque temos que colocar texto para que a página seja suficientemente longa como para que se possa deslocar verticalmente.

O código CSS

Temos que aplicar estilos, com folhas de estilo, para que cada elemento se coloque na posição adequada e para que o cabeçalho tenha uma cor diferente do resto da página e assim destaque um pouco.

BODY{
   font-family: verdana, arial;
   padding:0px;
   margin:0px;
}
#cabecalho {
   position:absolute;
   top:0px;
   left:0px;
   width: 100%;
   height:20px;
   background-color: #666666;
   color: #ffcc88;
}
#logo{
float: left;
   margin-left:2px;
   font-weight: bold;
}
#links{
   float: right;
   margin-right:4px;
}

#conteudo{
   margin: 30 5 10 5px;
}

Definimos que a página tenha a letra verdana ou arial, e que não haja margens.

Ao cabeçalho atribuímos uma posição absoluta. À princípio a colocamos na esquina superior esquerda: a parte de cima da página, com top: 0px; e na parte da esquerda com left:0px; Ademais lhe damos uma largura de 100% e uma altura de 20 pixels. Colocamos também um fundo e uma cor ao texto para que destaque.

Por sua parte, os elementos logo e links, que estão dentro do cabeçalho, também se posicionaram um, o logo, à esquerda e o outro, os links, à direita. Foi aplicada uma margem a estes dois elementos para que não fiquem totalmente colados às laterais da página.

Por último, temos o conteúdo, que o mais importante é que tem uma margem de 30 pixels na parte de cima, pois tem que deixar espaço ao cabeçalho, que inicialmente ocupará o espaço superior. As outras margens do conteúdo são para que o texto não se cole totalmente às bordas da página.

O código Javascript

O objetivo deste exemplo é mover a camada cabeçalho à posição necessária para que ocupe sempre a parte de cima. Cada vez que o visitante faça scroll vertical à página (cada vez que mover as barras de deslocamento), temos que atualizar a posição da camada cabeçalho.

Esta parte é a mais simples, se não fosse porque temos que fazer código DHTML compatível com todos os navegadores. Para fazer este código compatível vamos utilizar umas bibliotecas que viemos utilizando e mostrando seu funcionamento no manual de Cross-Browser DHTML compatível com todos os navegadores.

Essa biblioteca, denominada X-Library, serve para realizar facilmente código que funcionará corretamente nos navegadores mais comuns, como Internet Explorer, Firefox, Opera, etc. Nós vamos utilizar somente duas funções desta biblioteca.

xMoveTo(capa, posx, posy)
Esta função move uma camada cujo identificador se passa como primeiro parâmetro, à posição definida pelos parâmetros posx e posy.

xScrollTop()
Esta função devolve os pixels que deslocaram a página verticalmente. Ou seja, nos diz a quantidade de pontos que se fez scroll verticalmente.

A função que se encarrega de mover o cabeçalho, usando estas duas funções da biblioteca ficaria assim:

function move_cabecalho(){
   xMoveTo("cabecalho",0,xScrollTop())
}

Como se pode ver, a função é extremamente simples. A complexidade real fica dentro das bibliotecas x-Library. Agora só faltaria chamar a esta função cada vez que se faça scroll na página. Isto pode ser feito redefinindo o evento onscroll, que atua quando se movem as barras de deslocamento, e atribuindo à função move_cabecalho(). Isto se consegue com a linha de código:

window.onscroll=move_cabecalho

O exemplo estaria completo, a não ser se tivermos que incluir a biblioteca. Para isto temos que armar uma pequena complicação, que se explica no artigo X-Library Compiler.

O X Library compiler nos criará um arquivo .js com o código das funções que utilizamos da biblioteca. Este arquivo Javascript, temos que inclui-lo na página como arquivo externo.

<script src="cabecalho_visivel.js" type="text/javascript"></script>

Podemos ver o exemplo completo em uma página a parte.