Banner flutuante que acompanha a barra de rolagem em 5 minutos

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?