Dica: Como manter o loading visível com scroll
Dica rápida!
Como manter o loading ou menu flutuante ou o que quer que seja visível mesmo quando você faz o scroll.
Nos browsers mais inteligentes como FireFox e Safari uma propriedade no CSS é o suficiente para fazer o loading ficar paradinho sempre visível, mas para o IE(Pelo menos até a versão 6) é necessário fazer uma interferência com javascript para ajustar a posição do elemento.
CSS do loading:
JavaScript:
// Só faz o cheat se for o IE
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
document.documentElement.onscroll = updatePos;
}
function updatePos(){
var pos = document.documentElement.scrollTop;
document.getElementById('loading').style.top = pos;
}
HTML do Loading:
Carregando...
UPDATE:
Nosso colega Anderson Straube(http://www.andersonstraube.com) indicou um hack mais esperto para o IE.
Mais uma vez… só funciona no IE, é uma função chamada “expression”
http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx
assim, para o IE não seria necessário mais uma função JS, basta o comando “híbrido” no CSS, Exemplo:
Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.
Comentários
Pessoal e como faço ele ficar centralizado!?
pq perto do Scroll quase ninguem vê, por exemplo, Minha resolução é bem grande e uso um notebook widescreen!!! AI ja viu ne!?
[...] Sendo que você tem na página uma DIV com ID “loading” Ver este post: http://www.ajaxianos.com.br/2009/04/dica-como-manter-o-loading-visivel-com-scroll/ [...]
Legal.
Outra técnica ao invés de fazê-la via função javascript, é fazê-la diretamente no css utilizando o “expression”:
position: fixed;
_position: absolute; /* hack para IE */
top: 50%;
_top: expression(eval(document.documentElement.scrollTop + (document.documentElement.clientHeight)/2)); /* hack para IE */
Um abraço.
Att,
Anderson Straube