ドッキングされたヘッダーバーのロゴ

[helmi]

フォーラムでは、Discordのヘッダーバーの上にさらにヘッダーを使用しています。これまでは、独自の（追加の）ヘッダーにロゴを使用していたため、このヘッダーバーからロゴを非表示にするためにCSSを使用していました。

使用していたコードは次のとおりです。

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

ヘッダーがビューポートの上端に接触すると、ヘッダーコンテナに.dockedというクラスが追加されていました。この動作は、Beta 10または11で変更されたようです。

同様のことを行っている方で、回避策をお持ちの方はいらっしゃいますか？ CSSでそのようなことを行うのに役立つものは、私の知る限りあまりありません。htmlタグに--header-offsetプロパティがあることに気づきましたが、このようなことに使用できるかどうかはわかりません。

何かアイデアがあれば教えてください

[Don]

こんにちは

これは@Johaniの素晴らしいソリューションを使用できると思います。

Header scroll shadow

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…

---

このようなものです：arrow_double_down:

新しいコンポーネントを作成し、以下を追加します。

ヘッダーセクション

<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セクション

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

これにより、一番上のロゴが非表示になり、スクロールしたときにのみ表示されます。