ヘッダースクロールシャドウ

貢献 UX
1

https://forum.ghost.org/ のフォーラムをスクロールすると、ヘッダーに影が表示されます。彼らは以下の CSS を使用しているようです。

Screenshot_1
Screenshot_11480×116 9.49 KB

.d-header {
    height: 56px;
    padding: 0;
    border-bottom: 1px solid #e5eff5;
    background: rgba(255,255,255,0.97);
    box-shadow: none;
    transition: all 0.4s ease;
}

スクロール時の CSS:

Screenshot_2
Screenshot_21453×231 31.7 KB

.d-header.scrolling {
    box-shadow: 8px 14px 38px rgb(39 44 49 / 4%), 1px 3px 8px rgb(39 44 49 / 4%);
    transition: all 0.2s ease;
}

上記の CSS を自分のフォーラムに追加しても、同じ結果が得られません。

2

スクロール時にヘッダーに .scrolling クラスを追加するカスタム JavaScript が追加されました。Discourse はデフォルトではこれを行いません（見た目は素敵ですが）。

「いいね！」 4
3

この CSS クラスをデフォルトで適用したいです。とても素敵だと思います。

4

テーマのヘッダータブに、以下のようなコードを追加できます。

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

これにより、ヘッダーのラッパーに sticky クラスが追加され、スクロールしてヘッダーが上部に固定された際に、カスタム CSS を適用できるようになります。

.d-header {
  box-shadow: none;
  transition: box-shadow 0.3s ease-in-out;
  will-change: box-shadow;
  .sticky & {
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  }
}
「いいね！」 5
Logo in docked header bar
"docked" in <body> always present?
5

感謝しています。本当にありがとうございます。

「いいね！」 1
7

これに気づきました。このコードにより、PWA アプリケーションの実行が停止します。

8

この問題をデバッグするために、もう少し詳細が必要です。

コードを削除しても、PWA アプリケーションは動作しますか？
テーマの header タブに追加しましたか？
テストに使用しているデバイスや OS は何ですか？

「いいね！」 1
9

はい、テーマヘッダーを追加しました。コードを削除しても PWA は引き続き動作します。公式インストール手順に従って Ubuntu 20.04 がインストールされたサーバーで、ライブサイト、Android 11 デバイス、および PC の Chrome ブラウザでテストしました。