Logo en la barra de encabezado acoplada

Soporte
1

En nuestros foros usamos una cabecera adicional encima de la barra de cabecera de Discord. Hasta ahora hemos usado CSS para ocultar el logo de esta barra de cabecera, ya que usamos un logo adicional en nuestra propia cabecera (adicional).

Este es el código que usamos:

.d-header #site-logo.logo-big { display: none; }
.docked .d-header #site-logo.logo-big { display: inline; }

Se añadió .docked como una clase al contenedor de la cabecera tan pronto como la cabecera tocaba el extremo superior de la ventana gráfica. Este comportamiento parece haber cambiado con la Beta 10 o 11.

¿Alguien hace cosas similares y tiene una solución? Por lo que he podido ver, no hay nada que me ayude a hacer algo así con CSS. Noté la propiedad --header-offset en la etiqueta html, pero no estoy seguro de si es utilizable para este tipo de cosas.

Cualquier idea es bienvenida :wink:

2

Hola

Creo que puedes usar la fantástica solución de @Johani para esto.

Algo como esto :arrow_double_down:

Crea un nuevo componente y añade lo siguiente.

Sección de encabezado

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

Sección CSS

.d-header {
  #site-logo.logo-big {
    display: none;
  }
  .sticky & {
    #site-logo.logo-big {
      display: inline;
    }
  }
}

Esto ocultará el logo en la parte superior y solo lo mostrará al desplazarte.

2 Me gusta
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.