Ombra di scorrimento dell'intestazione

Contribuisci UX
1

Appare un’ombra nell’intestazione durante lo scorrimento del forum https://forum.ghost.org/. Ho notato che utilizzano il seguente 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 per lo scorrimento:

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

Non ottengo lo stesso risultato quando aggiungo il CSS sopra al mio forum.

2

Hanno aggiunto un JavaScript personalizzato che aggiunge la classe .scrolling all’intestazione durante lo scorrimento; Discourse non lo fa di default (ma è un bell’effetto!).

4 Mi Piace
3

Vorrei avere questa classe CSS di default. Penso che sia molto carina.

4

Puoi aggiungere qualcosa come questo alla scheda header del tuo tema

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

Questo aggiungerà una classe sticky al contenitore dell’header e ti permetterà di impostare CSS personalizzato quando l’header rimane “fissato” in alto durante lo scorrimento

.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 Mi Piace
Logo in docked header bar
"docked" in <body> always present?
5

Sono grato. Grazie mille.

1 Mi Piace
7

Ho notato questo. Questo codice impedisce l’esecuzione dell’applicazione PWA.

8

Ho bisogno di qualche dettaglio in più per eseguire il debug.

La tua applicazione PWA funziona se rimuovi il codice?
L’hai aggiunta alla scheda header del tuo tema?
Quale dispositivo/sistema operativo stai utilizzando per i test?

1 Mi Piace
9

Sì, aggiungi l’intestazione del tema. La PWA continua a funzionare dopo aver rimosso il codice. L’ho testato su un server con Ubuntu 20.04 installato seguendo le istruzioni di installazione ufficiali, sul sito live, su un dispositivo Android 11 e sul browser Chrome su PC.