0

Minha dúvida é a seguinte:

Eu quero/preciso de um código para meu site, que funcione da seguinte maneira:

Quando o usuário usar o scroll do mouse para descer até próximo do rodapé da página, A Div chamada por exemplo: Publicidade, desapareça em uma determinada parte.

Eu encontrei um jquery + css. Onde Coloquei o conteúdo dentro de uma div e aplique o css para que fique a flutuar sempre no centro, por exemplo:

<div class="publicidade"><img src="/imagens/Empresa.jpg" /></div>

O css ficaria da seguinte forma :

.publicidade {
display: none;
z-index: 999;
position: fixed;
z-index: 9999;
bottom: 0px;
vertical-align: bottom;
margin-bottom: 0;
} 

Então .... O jquery que encontrei foi para esconder ou mostrar a div quando o scroll atingir uma certa posição. Para isso vamos utilizar o evento "scroll" do jquery:

$( window ).scroll(function() {
nScrollPosition = $( window ).scrollTop();
if(nScrollPosition>=100){
     $( ".seta" ).css( "display", "block" );
}else{
     $( ".seta" ).css( "display", "none" );
} });

dd No exemplo acima, quando o scroll atingir 100px do topo, a Publicidade irá aparecer, caso contrário esconde a Publicidade.

Eu tentei de tudo para fazer o contrário, que quando ela atingir 50px do bottom ela sumir, mas não funcionou ( não sou muito conhecedor do assunto ).

Tentei com o seguinte código :

$( window ).scroll(function() {
nScrollPosition = $( window ).scrollBottom();
if(nScrollPosition>=70){
     $( ".seta" ).css( "display", "none" );
}else{
     $( ".seta" ).css( "display", "block" );
} });
4
  • Perdão ...onde tem a palavra Seta , o correto é publicidade, eu esqueci de mudar aqui no exemplo . Commented 6/06/2017 às 19:56
  • procurei no google e entre outros grupos, mas nada de conseguir Commented 6/06/2017 às 19:56
  • deixa eu ver se entendi, é mais ou menos como neste site?
    – RFL
    Commented 6/06/2017 às 20:01
  • wooooooooooooooooooooooooooooow !! isso man !! Commented 6/06/2017 às 20:02

1 Resposta 1

1

Sua lógica esta certa, você apenas esqueceu de pegar alguns valores como a distancia da div "alvo" do topo.

var publicidade = $('.publicidade');
$(window).scroll(function() {
    // Distancia do scroll
    var scrollTop = $(window).scrollTop(),

        // Distancia da div "alvo" do topo
        formDiv = $('.alvo').offset().top,

        // Diferença entre o scroll já percorrido 
        // pela distancia da div "alvo" do topo
        distance = (scrollTop - formDiv);

    if(distance > -300) { 
    // Se a distancia do topo passou em 300px a distancia da div "alvo" do topo
       publicidade.fadeOut('fast');
    } else {
       publicidade.fadeIn('fast');
    }
});
3
  • Me perdoa a falta de conhecimento, mas quando se refere Distancia da div "alvo" do topo, se referi por exemplo: uma div Z específica da página ? Commented 6/06/2017 às 21:02
  • seria uma Div como referência para calcular a distância ? Commented 6/06/2017 às 21:07
  • 1
    Valeu Deu certo !! apenas troquei o -300 por 300, coloquei uma Div chamada alvo próximo de onde eu quero como limite e ai quando passa ele desaparece. muito obrigado mesmo !!!!! Commented 6/06/2017 às 21:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .