Object disappear at a certain place on the page

Question

My question is this::

I want/need a code for my website, which works as follows:

When the user uses the mouse scroll to scroll down to near the footer of the page, the Div called for example: Advertising, disappear in a certain part.

I found a jquery + css. Where I put the content inside a div and apply the css so that it always floats in the center, for example:

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

The css would look like this :

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

So .... The jquery I found was to hide or show the div when the scroll reaches a certain position. For this we will use the jquery "scroll" event:

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

dd In the above example, when the scroll reaches 100px from the top, Advertising will appear, otherwise hide Advertising.

I tried everything to do the opposite, that when she reaches 50px from the bottom she vanishes, but it didn’t work ( I’m not very knowledgeable of the subject ).

I tried with the following code :

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

Answer 1

Your logic is right, you just forgot to pick up some values like the distance from the top div "target".

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