Logo in angedockter Kopfleiste

Unterstützung
2

Hallo

Ich denke, Sie können dafür @Johani 's fantastische Lösung verwenden.

So etwas wie hier :arrow_double_down:

Erstellen Sie eine neue Komponente und fügen Sie Folgendes hinzu.

Header-Bereich

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

CSS-Bereich

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

Dies blendet das Logo oben aus und zeigt es erst beim Scrollen an.

2 „Gefällt mir“