Header-Scroll-Schatten

Beitragen UX
1

Beim Scrollen auf dem Forum https://forum.ghost.org/ erscheint im Header ein Schatten. Ich habe festgestellt, dass sie folgendes CSS verwenden.

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 beim Scrollen:

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

Ich erhalte nicht das gleiche Ergebnis, wenn ich das obige CSS zu meinem eigenen Forum hinzufüge.

2

Sie haben ein benutzerdefiniertes JavaScript hinzugefügt, das der Kopfzeile beim Scrollen die Klasse .scrolling hinzufügt. Discourse macht das standardmäßig nicht (es sieht aber gut aus!).

4 „Gefällt mir“
3

Ich würde diese CSS-Klasse standardmäßig gerne haben. Ich finde, sie sieht auch sehr gut aus.

4

Sie können etwas wie Folgendes zum Header-Tab Ihres Themes hinzufügen

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

Dadurch wird dem Header-Wrapper eine sticky-Klasse hinzugefügt, sodass Sie benutzerdefiniertes CSS festlegen können, wenn der Header beim Scrollen oben „festklebt"

.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 „Gefällt mir“
Logo in docked header bar
"docked" in <body> always present?
5

Ich bin dankbar. Vielen Dank.

1 „Gefällt mir“
7

Ich habe das bemerkt. Dieser Code verhindert, dass die PWA-Anwendung ausgeführt wird.

8

Ich benötige noch ein paar weitere Details, um dies zu debuggen.

Läuft deine PWA-Anwendung, wenn du den Code entfernst?
Hast du ihn in den Reiter header deines Themes eingefügt?
Welches Gerät/Betriebssystem verwendest du zum Testen?

1 „Gefällt mir“
9

Ja, Header-Thema hinzufügen. Die PWA funktioniert auch nach dem Entfernen des Codes weiterhin. Ich habe es auf einem Server mit Ubuntu 20.04 gemäß den offiziellen Installationsanweisungen getestet, sowohl auf der Live-Website als auch auf einem Android-11-Gerät und im Chrome-Browser auf dem PC.