0
271
VistasMostrar y ocultar el elemento de pie de página al desplazarse hasta la parte inferior de la página
Tengo una estructura como esta: 
Como puede ver, tengo una nav-bar fija en la parte superior de la página y una barra lateral desplegable. Entonces tengo un elemento <div> con ID de content .
Dentro de este elemento <div> tengo algo de contenido y, finalmente, tengo un <div> con una posición fija en la parte inferior de la página.
Lo que quiero es ocultar el div inferior cuando el usuario se desplaza hacia abajo hasta la parte inferior de la página.
He intentado esto pero no funciona como esperaba:
$('div#content').scroll(function () { var fixedBottom = $("#dialog-button-bar"); if ($('div#content').height() <= ($(window).height() + $(window).scrollTop())) { fixedBottom.css("opacity", 0 ); } else { fixedBottom.css("opacity", 1 ); } });Espero que alguien pueda ayudarme. Gracias
2 Respuestas
Responde la pregunta0
Esta es complicada porque los métodos jQuery scrollTop() y height() cambian su valor devuelto al agregar y eliminar un elemento HTML.
Una forma de hacerlo es definiendo una variable booleana que ayudará a evitar que la altura del documento cambie al agregar el pie de página. Y así, al hacer esto, es posible crear una declaración if que cambiará la display del atributo CSS de acuerdo con la posición de desplazamiento.
let footerVisible = false; var docHeight = 0; $(window).scroll(function() { var scrollPos = $(window).scrollTop() + $(window).height(); if(footerVisible == false){docHeight = $(document).height()} if(scrollPos >= docHeight){ footerVisible = true; $('.footer').css('display', 'block'); }else if(scrollPos <= docHeight){ footerVisible = false; $('.footer').css('display', 'none'); } }); *{width:100%;margin:0;padding:0;color:white;text-align:center} .nav{ background: #00A19D; height:60px; } .content{ background: #FFF8E5; height:1500px; } .footer{ background: #345B63; height:200px; display:none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class='nav'><br><h1>Nav</h1></section> <section class='content'></section> <section class='footer'><br><h1>Magical Footer</h1></section>0
Está agregando scollTop a la altura constantemente, ¿esto no siempre haría que la declaración if sea verdadera, ya que el valor de altura + algún valor siempre es mayor que la altura de divs? Intente comparar la altura de los documentos con el scrollTop y no con la altura de los divs