Logo in angedockter Kopfleiste

Unterstützung
1

In unseren Foren verwenden wir eine zusätzliche Kopfzeile über der Discord-Kopfzeilenleiste. Bisher haben wir etwas CSS verwendet, um das Logo aus dieser Kopfzeilenleiste auszublenden, da wir ein zusätzliches Logo in unserer eigenen (zusätzlichen) Kopfzeile verwendet haben.

Das ist der Code, den wir verwendet haben:

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

.docked wurde als Klasse zum Kopfzeilencontainer hinzugefügt, sobald die Kopfzeile die Oberkante des Viewports berührte. Dieses Verhalten scheint sich mit Beta 10 oder 11 geändert zu haben.

Macht das jemand ähnlich und hat eine Lösung dafür? Soweit ich sehen konnte, gibt es nichts, was mir hilft, so etwas mit CSS zu tun. Mir ist die Eigenschaft --header-offset am html-Tag aufgefallen, aber ich bin mir nicht sicher, ob diese für so etwas verwendet werden kann.

Jede Idee ist willkommen :wink:

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

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