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" );
} });