Logo nella barra dell'intestazione ancorata

Supporto
1

Sui nostri forum utilizziamo un’intestazione aggiuntiva sopra la barra delle intestazioni di Discord. Finora abbiamo utilizzato alcuni CSS per nascondere il logo da questa barra delle intestazioni, poiché utilizzavamo un logo aggiuntivo nella nostra (ulteriore) intestazione.

Questo è il codice che abbiamo utilizzato:

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

.docked è stato aggiunto come classe al contenitore dell’intestazione non appena l’intestazione ha toccato il bordo superiore della viewport. Questo comportamento sembra essere cambiato con la Beta 10 o 11.

Qualcuno sta facendo cose simili e ha una soluzione alternativa? Per quanto ho potuto vedere, non c’è davvero nulla che mi aiuti a fare qualcosa del genere con i CSS. Ho notato la proprietà --header-offset sul tag html, ma non sono sicuro se sia utilizzabile per questo tipo di cose.

Qualsiasi idea è benvenuta :wink:

2

Ciao

Penso che tu possa usare per questo la fantastica soluzione di @Johani.

Qualcosa del genere :arrow_double_down:

Crea un nuovo componente e aggiungi quanto segue.

Sezione Header

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

Sezione CSS

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

Questo nasconderà il logo in alto e lo mostrerà solo quando scorri.

2 Mi Piace
3

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