0

Estoy armando una web con angular2 y css. En una vista, tenga 1 grilla y necesito agregarle en la parte de abajo de la pantalla una panel de acciones que esté siempre fijo abajo (tiene que ser responsive). Eso lo hice con este codigo:

<div style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Panel de Acciones
</div>

Ahora bien...con eso, cuando hago scroll en la grilla, todo va bien y la grilla "pasa siempre por debajo" como yo lo necesito. El problema es cuando llega al fondo, que el footer de la pagina se mezcla con el panel fijo...yo necesitaria que cuando esto ocurre, el panel se levante X pixeles (los que ocupa el footer) de manera que quede el panel y el footer debajo. Alguna pista me pueden dar???. Gracias

5
  • ¿Por qué no le pones bottom: 80px al panel?
    – gugadev
    el 8 abr. 2017 a las 21:03
  • Porque cuando el footer no aparece el panel queda "despegado" del bottom. Deberia quedar pegado al bottom de la pantalla HASTA que aparezca el footer...ahi levantarse tanto como el height del footer. No sé si me explico el comportamiento que deseo el 8 abr. 2017 a las 21:13
  • Vale. Entonces lo que hay que hacer es un listener para scroll, detectando cuando la barra llegue a determinado punto en donde aparece el footer para poner el panel a 80px. ¿Esto es lo que intentas?
    – gugadev
    el 8 abr. 2017 a las 21:21
  • Por lo que me comentas, entiendo que ese seria el comportamiento...como puedo hacerlo? el 8 abr. 2017 a las 21:25
  • He publicado una respuesta.
    – gugadev
    el 8 abr. 2017 a las 21:38

1 respuesta 1

1

Lo que tienes que hacer es agregar un handler para el evento scroll y estar pendiente cuando el scroll llegue al final del documento. Cuando esto suceda, muestras el footer y subes el panel. Cuando se suba el scroll, vuelve a su estado natural.

Ejemplo

window.onscroll = function() {
  const scrollTop = window.scrollY;
  const height = window.innerHeight;
  const winScrollHeight = scrollTop + height;
  const body = document.body;
  const html = document.documentElement;
  const panel = document.querySelector('.panel');
  const footer = document.querySelector('.footer');

  const docHeight = Math.max(
    body.scrollHeight, body.offsetHeight,
    html.clientHeight, html.scrollHeight, html.offsetHeight
  );
  const isAtBottom = winScrollHeight === docHeight;
  const isFooterVisible = footer.classList.contains('visible');

  if (isAtBottom && !isFooterVisible) {
    footer.classList.add('visible');
    panel.style.bottom = '60px';
  }

  if (!isAtBottom && isFooterVisible) {
    footer.classList.remove('visible');
    panel.style.bottom = '0px';
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.content {
  background-color: coral;
  height: 1200px;
  margin: 0 auto;
  width: 100px;
}

.panel {
  background-color: #2980b9;
  bottom: 0;
  height: 80px;
  position: fixed;
  width: 100%;
}

.footer {
  background-color: #313131;
  bottom: 0;
  display: none;
  height: 60px;
  position: fixed;
  width: 100%;
}

.footer.visible {
  display: block;
}
<article class="content"></article>
<div class="panel"></div>
<footer class="footer"></footer>

3
  • Estoy javascript?...pregunto porque yo uso typescript...lo puedo insertar igual? (disculpá la ignorancia) el 8 abr. 2017 a las 21:41
  • Sí, puedes usarlo igual. Typescript es solo un superset de JavaScript.
    – gugadev
    el 8 abr. 2017 a las 21:46
  • Excelente! Gracias el 8 abr. 2017 a las 21:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.