Sombra de rolagem do cabeçalho

Contribuir Experiência do Usuário
1

Uma sombra aparece no cabeçalho ao rolar pelo fórum https://forum.ghost.org/. Percebi que eles estão usando o seguinte 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 ao rolar:

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

Não estou obtendo o mesmo resultado ao adicionar o CSS acima ao meu próprio fórum.

2

Eles adicionaram um JavaScript personalizado que adiciona a classe .scrolling ao cabeçalho durante a rolagem. O Discourse não faz isso por padrão (mas fica bem bonito!).

4 curtidas
3

Gostaria de ter essa classe CSS por padrão. Acho que ela fica muito bonita também.

4

Você pode adicionar algo como isso à aba de cabeçalho do seu 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>

Isso adicionará uma classe sticky ao wrapper do cabeçalho e permitirá que você defina CSS personalizado quando o cabeçalho estiver “fixo” no topo enquanto você rola a página

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

Sou grato. Muito obrigado.

1 curtida
7

Notei isso. Este código impede que o aplicativo PWA seja executado.

8

Preciso de mais alguns detalhes para depurar isso.

Sua aplicação PWA funciona se você remover o código?
Você o adicionou à aba header do seu tema?
Que dispositivo/sistema operacional você está usando para testar isso?

1 curtida
9

Sim, adicione o cabeçalho do tema. O PWA continua funcionando após remover o código. Testei no servidor com Ubuntu 20.04 instalado seguindo as instruções oficiais de instalação, no site ao vivo, em um dispositivo Android 11 e no navegador Chrome no PC.