# Logo nella barra dell'intestazione ancorata

**URL:** https://meta.discourse.org/t/logo-in-docked-header-bar/216199
**Category:** Support
**Created:** [27 Gennaio 2022, 2:48pm UTC](https://meta.discourse.org/t/logo-in-docked-header-bar/216199 "2022-01-27T14:48:10Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![helmi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/helmi/32/114772_2.png) [@helmi](https://meta.discourse.org/u/helmi)
#### Post date: [27 Gennaio 2022, 2:48pm UTC](https://meta.discourse.org/t/logo-in-docked-header-bar/216199/1 "2022-01-27T14:48:11Z")

</div>

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:

```css
.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 😉

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [27 Gennaio 2022, 4:11pm UTC](https://meta.discourse.org/t/logo-in-docked-header-bar/216199/2 "2022-01-27T16:11:38Z")

</div>

Ciao

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

> [@Header scroll shadow](https://meta.discourse.org/t/header-scroll-shadow/198021/4?u=dodesz):
>
> You can add something like to the header tab of your theme \<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 IntersectionObse…

* * *

Qualcosa del genere ⏬

Crea un nuovo componente e aggiungi quanto segue.

**Sezione Header**

```plaintext
<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**

```plaintext
.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.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [26 Febbraio 2022, 4:11pm UTC](https://meta.discourse.org/t/logo-in-docked-header-bar/216199/3 "2022-02-26T16:11:46Z")

</div>

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