Логотип в заголовке в доковом режиме

Поддержка
1

На наших форумах мы используем дополнительный заголовок над панелью заголовка Discord. До сих пор мы применяли CSS, чтобы скрыть логотип из этой панели, так как использовали собственный дополнительный логотип в своём заголовке.

Вот код, который мы использовали:

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

Класс .docked добавлялся к контейнеру заголовка, как только заголовок касался верхнего края области просмотра. Такое поведение, похоже, изменилось с выходом бета-версии 10 или 11.

Кто-нибудь делает что-то подобное и знает обходной путь? Насколько я смог понять, нет ничего, что помогло бы реализовать подобное с помощью CSS. Я заметил свойство --header-offset на теге html, но не уверен, можно ли его использовать для таких задач.

Любые идеи будут приветствоваться :wink:

2

Привет

Я думаю, вы можете использовать отличное решение от @Johani для этого.

Что-то вроде этого :arrow_double_down:

Создайте новый компонент и добавьте следующее.

Раздел заголовка

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

Раздел CSS

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

Это скроет логотип вверху и покажет его только при прокрутке.