Ombre de défilement de l'en-tête

Contribuer UX
1

Une ombre apparaît dans l’en-tête lors du défilement sur le forum https://forum.ghost.org/. Je vois qu’ils utilisent le CSS suivant.

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 de défilement :

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

Je n’obtiens pas le même résultat lorsque j’ajoute le CSS ci-dessus à mon propre forum.

2

Ils ont ajouté un JavaScript personnalisé qui ajoute la classe .scrolling à l’en-tête lors du défilement. Discourse ne le fait pas par défaut (ce qui a l’air sympa !).

4 « J'aime »
3

J’aimerais que cette classe CSS soit appliquée par défaut. Je trouve qu’elle rend aussi très bien.

4

Vous pouvez ajouter quelque chose comme ceci à l’onglet en-tête de votre thème :

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

Cela ajoutera une classe sticky à l’élément conteneur de l’en-tête et vous permettra de définir un CSS personnalisé lorsque l’en-tête est « collé » en haut lors du défilement.

.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 « J'aime »
Logo in docked header bar
"docked" in <body> always present?
5

Je suis reconnaissant. Merci beaucoup.

1 « J'aime »
7

J’ai remarqué cela. Ce code empêche l’application PWA de s’exécuter.

8

J’ai besoin de quelques détails supplémentaires pour déboguer ce problème.

Votre application PWA fonctionne-t-elle si vous supprimez le code ?
L’avez-vous ajoutée à l’onglet header de votre thème ?
Quel appareil et quel système d’exploitation utilisez-vous pour tester cela ?

1 « J'aime »
9

Oui, ajoutez l’en-tête du thème. La PWA continue de fonctionner après la suppression du code. Je l’ai testé sur un serveur sous Ubuntu 20.04, installé selon les instructions officielles, sur le site en direct, sur un appareil Android 11 et sur le navigateur Chrome sur PC.