Object disappear in a certain place on the page

Question

Object disappear in a certain place on the page

Navigation

#1 by (1 votes)

0

My question is:

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

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

I found a jquery + css. Where I put the content inside a div and apply the css so that it is always floating 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 "scroll" event of jquery:

$( 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 it hides Advertising.

I tried everything to do the opposite, that when it reaches 50px from the bottom it disappears, but it did not work (I'm not very knowledgeable about it).

I tried the following code:

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

php javascript java html css

asked by anonymous 06.06.2017 / 21:55

1 answer

How to change and maintain mapping of classes and properties using ADO.net Slim framework error: call require '../Slim/Slim/Slim.php';

score 1 · Accepted Answer

Your logic is right, you just forgot to take some values as the distance to the "target" div from the top.

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