Come mostrare div quando l'utente raggiunge il fondo della pagina?

Quando l'utente scorre verso la parte inferiore della pagina, voglio mostrare qualche div, con jQuery ovviamente. E se l'utente scorre indietro verso l'alto, div si dissolve in dissolvenza. Così come calcolare finestra (o qualunque sia il nome giusto) :)Come mostrare div quando l'utente raggiunge il fondo della pagina?

Grazie

fonte

2010-05-04 Kenan

stai parlando di un div che avrà una posizione: fissa; o un div che si trova nella parte inferiore del contenuto? – codedude

sarà fissato posizione in fondo alla pagina, forse "in basso: 50px" – Kenan

Questo deve iniziare:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2768264</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(window).scroll(function() { 
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { 
         alert('Bottom reached!'); 
        } 
       }); 
      });  
     </script> 
     <style> 
      body { margin: 0; } 
     </style> 
    </head> 
    <body> 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    </body> 
</html>

Questo presuppone che body ha un margin di 0. Altrimenti è necessario aggiungere il margine superiore e inferiore allo $('body').height().

fonte

2010-05-04 20:10:33 BalusC

Grazie ma questo non funziona :( – Kenan

Hai controllato i margini? Ho aggiornato la risposta per includere un SSCCE. – BalusC

Sì, il margine è 0, Sto usando il reset dei CSS e sto usando jQuery 1.3.2? – Kenan

$ (document). scrollTop() dovrebbe darti la posizione della barra di scorrimento. si controlla l'altezza del documento. quindi sfumare dentro o fuori il div.

fonte

2010-05-04 19:52:16

Ecco una piccola modifica sul codice del BalusC se si desidera visualizzare un non div un popup javascript:

<head> 
    <title>SO question 2768264</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(window).scroll(function() { 
       if ($("body").height() <= ($(window).height() + $(window).scrollTop())) { 
        $("#hi").css("display","block"); 
       }else { 
        $("#hi").css("display","none"); 
       } 
      }); 
     }); 
    </script> 
    <style> 
     body { margin: 0; } 
     #hi { 
      background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none; 
     } 


    </style> 
</head> 
<body> 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 

    <div id="hi">HIIIIIIIIIIII</div> 
</body>

fonte

2012-03-20 03:18:21

Ciao. Diciamo invece di "body" Sto usando un div ID e cosa succede se voglio che "hi" appaia quando sono all'80% del div scrolled, per esempio? :) Vota up pagherà una buona risposta :) –

È possibile utilizzare il seguente:

$(window).scroll(function() { 
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) { 
     //Bottom Reached 
    } 
});

usa questo perché ho

body { 
    height:100%; 
}

Spero che questo aiuti

fonte

2013-03-21 20:17:05

Grazie, ero esattamente nello stesso caso. La tua soluzione ha funzionato per me! – Adrien

@Adrien, sei il benvenuto amico mio. Sono contento di poter aiutare :) –

Come mostrare div quando l'utente raggiunge il fondo della pagina?

risposta

Problemi correlati