Sombra de desplazamiento de encabezado

Contribuir UX
1

Aparece una sombra en el encabezado al desplazarse por el foro https://forum.ghost.org/. Veo que están utilizando el siguiente CSS.

Screenshot_1
Screenshot_11480×116 9.49 KB

.d-header {
    height: 56px;
    padding: 0;
    border-bottom: 1px solid #e5eff5;
    background: rgba(255,255,255,0.97);
    box-shadow: none;
    transition: all 0.4s ease;
}

CSS al desplazarse;

Screenshot_2
Screenshot_21453×231 31.7 KB

.d-header.scrolling {
    box-shadow: 8px 14px 38px rgb(39 44 49 / 4%), 1px 3px 8px rgb(39 44 49 / 4%);
    transition: all 0.2s ease;
}

No obtengo el mismo resultado cuando agrego el CSS anterior a mi propio foro.

2

Han añadido un poco de JavaScript personalizado que agrega la clase .scrolling al encabezado al hacer scroll; Discourse no lo hace por defecto (¡pero se ve muy bien!).

4 Me gusta
3

Me gustaría tener esta clase CSS de forma predeterminada. Creo que también se ve muy bien.

4

Puedes agregar algo similar a la pestaña de encabezado de tu tema

<div class="header-anchor"></div>

<script type="text/discourse-plugin" version="0.8">
if (!"IntersectionObserver" in window) return;

const { on } = require("discourse-common/utils/decorators");

const stickyClass = "sticky";

api.modifyClass("component:site-header", {
  @on("didInsertElement")
  stickyHeaderCheck() {
    const anchor = document.querySelector(".header-anchor");
    const header = this.element;

    new IntersectionObserver(entries => {
      if (!entries[0].isIntersecting) {
        header.classList.add(stickyClass);
      } else {
        header.classList.remove(stickyClass);
      }
    }).observe(anchor);
  }
});
</script>

Esto agregará una clase sticky al contenedor del encabezado y te permitirá definir CSS personalizado cuando el encabezado quede “fijado” en la parte superior al hacer scroll

.d-header {
  box-shadow: none;
  transition: box-shadow 0.3s ease-in-out;
  will-change: box-shadow;
  .sticky & {
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  }
}
5 Me gusta
Logo in docked header bar
"docked" in <body> always present?
5

Estoy agradecido. Muchas gracias.

1 me gusta
7

Noté esto. Este código detiene la ejecución de la aplicación PWA.

8

Necesito algunos detalles más para depurar esto.

¿Tu aplicación PWA funciona si quitas el código?
¿Lo agregaste a la pestaña header de tu tema?
¿Qué dispositivo/sistema operativo estás usando para probar esto?

1 me gusta
9

Sí, agrega el encabezado del tema. La PWA sigue funcionando después de eliminar el código. Lo probé en un servidor con Ubuntu 20.04 instalado siguiendo las instrucciones oficiales de instalación, en el sitio en vivo, en un dispositivo con Android 11 y en el navegador Chrome en PC.