Logo na barra de cabeçalho acoplada

Suporte
1

Em nossos fóruns, usamos um cabeçalho adicional acima da barra de cabeçalho do Discord. Até agora, usamos algum CSS para ocultar o logotipo desta barra de cabeçalho, pois usamos um logotipo adicional em nosso próprio cabeçalho (adicional).

Este é o código que usamos:

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

.docked foi adicionado como uma classe ao contêiner do cabeçalho assim que o cabeçalho tocou a extremidade superior da janela de visualização. Esse comportamento parece ter mudado com o Beta 10 ou 11.

Alguém está fazendo coisas semelhantes e tem uma solução alternativa para isso? Pelo que pude ver, não há realmente nada que me ajude a fazer algo assim com CSS. Notei a propriedade --header-offset na tag html, mas não tenho certeza se isso é utilizável para esse tipo de coisa.

Quaisquer ideias são bem-vindas :wink:

2

Olá

Acho que você pode usar a fantástica solução do @Johani para isso.

Algo como isto :arrow_double_down:

Crie um novo componente e adicione o seguinte.

Seção do cabeçalho

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

Seção CSS

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

Isso ocultará o logotipo no topo e só o mostrará ao rolar.

2 curtidas
3

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