Há na propriedade ‘position’ do CSS um valor chamado ‘fixed’. Quando usado, este valor determina que o elemento deve ficar fixo na posição que você mandar, e quando a barra de rolagem é movida, este elemento fica fixado na posição que você definiu. Veja o código:
body{margin:0; padding:0;}
div {
position:fixed;
top:10px;
left:10px;
width:150px;
height:200px:
border:1px solid black;
background:#CCC;
}
Resultado do código acima, sem funcionar no IE.
Eu apenas defini um position: fixed; para o DIV. Quando a rolagem é ativada o elemento fica fixado na posição que você definiu.
Só que isso não funciona no IE. Pelo menos por vias normais. Há uma maneira para fazer isso funcionar no IE. Para tanto usaremos CSS HACKS. Já digo que essa é uma daquelas soluções que não há explicação. Simplesmente funciona e pronto. Eu vi essa solução aqui.
Para o IE, você vai usar o seguinte código:
`Há na propriedade ‘position’ do CSS um valor chamado ‘fixed’. Quando usado, este valor determina que o elemento deve ficar fixo na posição que você mandar, e quando a barra de rolagem é movida, este elemento fica fixado na posição que você definiu. Veja o código:
body{margin:0; padding:0;}
div {
position:fixed;
top:10px;
left:10px;
width:150px;
height:200px:
border:1px solid black;
background:#CCC;
}
Resultado do código acima, sem funcionar no IE.
Eu apenas defini um position: fixed; para o DIV. Quando a rolagem é ativada o elemento fica fixado na posição que você definiu.
Só que isso não funciona no IE. Pelo menos por vias normais. Há uma maneira para fazer isso funcionar no IE. Para tanto usaremos CSS HACKS. Já digo que essa é uma daquelas soluções que não há explicação. Simplesmente funciona e pronto. Eu vi essa solução aqui.
Para o IE, você vai usar o seguinte código:
`
Sim, o código não vai validar, mas você pode escolher outro hack que passe no validador.