Logo dans la barre d'en-tête ancrée

Soutien
1

Sur nos forums, nous utilisons un en-tête supplémentaire au-dessus de la barre d’en-tête Discord. Jusqu’à présent, nous avons utilisé du CSS pour masquer le logo de cet en-tête, car nous utilisions un logo supplémentaire dans notre propre en-tête (supplémentaire).

Voici le code que nous avons utilisé :

.d-header #site-logo.logo-big { display: none; }
.docked .d-header #site-logo.logo-big { display: inline; }

.docked a été ajouté comme classe au conteneur d’en-tête dès que l’en-tête touchait le bord supérieur de la fenêtre d’affichage. Ce comportement semble avoir changé avec la Beta 10 ou 11.

Quelqu’un fait-il des choses similaires et a-t-il une solution de contournement ? Autant que j’ai pu voir, il n’y a pas vraiment de quoi m’aider à faire quelque chose comme ça avec du CSS. J’ai remarqué la propriété --header-offset sur la balise html, mais je ne suis pas sûr si cela est utilisable pour ce genre de choses.

Toutes les idées sont les bienvenues :wink:

2

Bonjour

Je pense que vous pouvez utiliser la solution fantastique de @Johani pour cela.

Quelque chose comme ceci :arrow_double_down:

Créez un nouveau composant et ajoutez ce qui suit.

Section d’en-tête

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

Section CSS

.d-header {
  #site-logo.logo-big {
    display: none;
  }
  .sticky & {
    #site-logo.logo-big {
      display: inline;
    }
  }
}

Cela masquera le logo en haut et ne l’affichera que lorsque vous ferez défiler.

2 « J'aime »
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.