Um atributo muito interessante quem tem na propriedade position é o fixed.

Com ele você pode posicionar um objeto no palco (como se fosse absolute) só que ele sempre estará na “mesma posição”, mesmo rolando a tela.

Infelizmente o IE (até o 6) não reconhece esse atributo, mas antes de sairmos tentando bolar um código em javascript para ficar posicionando a janela quando o usuário rolar a tela. Vamos usar só o CSS.

Pensando: Poderíamos usar como position o absolute já que com ele a gente tem uma liberdade maior para posicionar o objeto. Mas ainda temos o problema com a rolagem.

Mas tem o overflow, podemos colocar como auto para criar uma barra de rolagem para o que ultrapassar o limite, e o nosso objeto continuará sempre no mesmo lugar. Pronto!

Nos browser espertos (smarts) fica assim:

#menu {
    top: 15%;
    left: 50px;
    width: 200px;
    padding: 20px 0px;
    border: 2px solid #CCCCCC;
    position: fixed;
}

Dá para notar que é como estivéssemos colocando como absolute mesmo (left, top). Só isso basta.

Agora para o IE vamos colocar o CSS dentro de um comentário do HTML (que por sua vez só ele mesmo para ler como código o comentário):

<!--[if IE]>
<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
#menu {
    position: absolute;
}
</style>
<![endif]-->

Colocamos o body e o html com overflow auto e altura 100% para confirmar que sua altura é toda a janela (a visão do usuário). E definimos o objeto com postion absolute, não precisamos colocar left nem top, porque já foram passados acima, e só estamos sobrescrevendo (position).

Veja esse exemplo funcionando. Dê uma olhada no código-fonte.

Na internet podemos encontrar outros métodos para isto. Vi um que continha expressões javascript no CSS (coisa do IE) e outro que usava javascript puro para posicionar.

Para mais exemplos, resultado da busca:

Powered Google