¿Cómo mostrar div cuando el usuario llega a la parte inferior de la página?

Cuando el usuario se desplaza hacia la parte inferior de la página, quiero mostrar algo de div, con jQuery, por supuesto. Y si el usuario se desplaza de regreso a la parte superior, div se desvanece. Entonces, ¿cómo calcular la ventana gráfica (o lo que es el nombre correcto) :)¿Cómo mostrar div cuando el usuario llega a la parte inferior de la página?

Gracias

Fuente

2010-05-04 Kenan

¿Estás hablando de un div que tendrá una posición: fija? o un div que está justo en la parte inferior del contenido? – codedude

se fijará la posición en la parte inferior de la página, tal vez "abajo: 50px" – Kenan

Esto debe empezar:

<!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>

Esto supone que tiene un bodymargin de 0. De lo contrario, deberá agregar el margen superior e inferior al $('body').height().

Fuente

2010-05-04 20:10:33 BalusC

Gracias pero esto no funciona :( – Kenan

¿Revisó los márgenes? Actualicé la respuesta para incluir un SSCCE. – BalusC

Sí, el margen es 0, Estoy usando el restablecimiento de CSS. Y también estoy usando jQuery 1.3.2? – Kenan

$ (document). scrollTop() debería darle la posición de la barra de desplazamiento. lo compruebas frente a la altura del documento. luego se desvanece dentro o fuera del div.

Fuente

2010-05-04 19:52:16

He aquí una pequeña edición el código del BalusC si desea mostrar no un div una ventana emergente 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>

Fuente

2012-03-20 03:18:21

Hola. Digamos que en lugar de "cuerpo", estoy usando una ID div y, ¿qué sucede si quiero que aparezca el "Hola" cuando estoy en el 80% del div desplazado, por ejemplo? :) Votar va a pagar una buena respuesta :) –

Usted puede usar la siguiente:

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

Puedo usar este porque tengo

body { 
    height:100%; 
}

esperanza esto ayuda

Fuente

2013-03-21 20:17:05

Gracias, estaba exactamente en el mismo caso. ¡Tu solución funcionó para mí! – Adrien

@Adrien De nada, mi amigo. Me alegro de poder ayudar :) –

¿Cómo mostrar div cuando el usuario llega a la parte inferior de la página?

Respuesta

Cuestiones relacionadas