Tudo o que é simples e objetivo dispensa maiores comentários, então vamos ao que interessa:
Código HTML
<div id="float-banner" class="float-banner">
<img src="banner.gif">
</div>
Eu coloquei uma classe “float-banner” e o ID também “float-banner”, mas fique atento, pois ambos possuem objetivos diferentes.
Basicamente, a classe é atrelada ao estilo do CSS, e o ID é o identificador do elemento para que o jQuery reconheça-o com melhor performance.
Então, aqui está o código CSS
.float-banner {
position: absolute;
left: 50%;
width: 200px; height: 200px;
margin-top: 200px; margin-left: -200px;
}
Importante destacar o uso do position, left e margin-left. A combinação dessas propriedades faz com que seu banner apareça sempre centralizado na tela.
E, finalmente, o código jQuery/Javascript
jQuery(document).ready(function() {
$(window).scroll(function () {
var set = $(document).scrollTop()+"px";
jQuery('#float-banner').animate({
top:set
},
{
duration:1000,
queue:false
});
});
});
Simples não?
