Banner flutuante que acompanha a barra de rolagem em 5 minutos

Avião com banner flutuante
  • 17 de out de 2014
  • 16054 Visualizações
  • 24 Comentários

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 () {
        set = $(document).scrollTop()+"px";
        jQuery('#float-banner').animate(
            {top:set},
            {duration:1000, queue:false}
        );
    });
});

Simples não?

TAGS: jquery, banner, banner flutuante, tiagomatosweb

Deixe um comentário


24 Comentários

    • desculpa não entendi o primeiro código, onde eu aplico ele ?? obrigado

      • Olá Rubens, poderia ser mais específico em o que não entendeu? ABs.

    • Parabéns pelo empenho em colaborar com os iniciantes.

    • Olá, este codigo poderia ser usado para colocar um selo SSL flutuante no canto inferior direito de minha pagina? Pois pelo script fornecido pela certificadora ele fica sempre depois do footer na pagina. Grato.

      • Sim, certamente funcionaria! Basta vc colocar o código dentro da div do nosso script.

    • Tiago Boa tarde ,Por favor eu em um site de anuncio ele me pede para gerir um anuncio html , e colar em minha pagina ,plataforma do iluria , mas nao tenho informaçao nenhuma de onde colar Poderia me ajudar desde ja obrigado

      • Olá Luiz,

        Sim, posso ajudar mas não entendi exatamente o que precisa. Poderia explicar melhor?

    • Oi Tiago ! Estou inciando na Profissão, tenho me esforçado bastante, mas não consegui fazer funcionar seu Código. Também não localizei o erro destacado abaixo: "float-banner e no arquivo de CSS e JS está com #banner-float e .banner-float." Vc poderia divulgar novamente o Código com eventuais por inteiro, só para fazer um cola-copia. kkk Desculpe pedir isso, mas é que estou começando e tudo é difícil !

      • Olá Joaquin, siga os passos dos post e use tudo como float-banner e que irá funcionar. Se não conseguir, me avisa!

    • https://jsfiddle.net/9dy4c2ud/ o código esta assim até agora

      • Não identifiquei o element #float-banner2 presente no seu html.

    • amigo aqui não esta dando certo , a img aparece certo no canto direito mas ela não fica flutuante quando desço a pagina do meu site

    • Sensacional!!! Direto ao ponto, funcionou aqui, obrigada por compartilhar o seu conhecimento!

      • Valeu Camila! Bom saber que esse post ajudou em algo! Apareça e compartilhe o seu.

    • Olá Tiago, Existem um erro no artigo, o ID e CSS está com float-banner e no arquivo de CSS e JS está com #banner-float e .banner-float.

      • Caramba! Náo havia percebido isso Bruno. Vocë é cara, olho de águia! hahaha. Grande abraço e obrigado!

    • Eu não estou conseguindo fazer ele flutuar...
      fiz um arquivo .css com o comando css que você colocou acima!
      mas o script eu não sei como fazer...
      faço um arquivo .js ou coloco no corpo da pagina?
      obrigado desde já!

      • Opa Gabriel, o script você pode colocar na própria página, mas recomendo criar um arquivo .js e colocar lá dentro.

        Compartilha seu código no www.jsfiddle.net e aí vamos ver como está.

    • Parabéns muito bom. Tem como colocar sempre do lado direito, em vez de centrado.

      • Olá Segio, sim tem sim! O seu CSS deve ficar (nem testei, mas deve funcionar):

        .banner-float {

           position: absolute;

           width: 200px; height: 200px;

           margin-top: 200px; margin-right: 0px

        }

    • Olá, no caso, se eu quiser limitar para o banner flutuar entre 200 px no topo e 100 px no rodapé, teria como? tipo, ele nao subir mais que os 200 px do topo e os 100 da parte de baixo o que teria que mexer, tem ideia?

      • Sim, tem como você verifica isso pelo javascript fazendo uma verificação de quanto já rolou. Aí você compara com o valor que vc quer e decide se rola mais ou não!

      • Fabio Augusto Pinheiro
      • 27 de Jan de 2015
      • Responder

      Simples demais, me ajudou pra caramba e foi a forma mais correta e simples que encontrei pra resolver o que eu deseja para minha pagina, Grato demais, continue assim Tiago Matos.

      • Olá Fabio, obrigado meu caro! Bom saber que te ajudou de alguma forma! Apareça sempre!