도킹된 헤더 바의 로고

제품 지원
1

당사 포럼에서는 Discord 헤더 바 위에 추가 헤더를 사용하고 있습니다. 그동안은 당사 자체(추가) 헤더에 별도의 로고를 사용했기 때문에, 해당 헤더 바의 로고를 숨기기 위해 CSS를 사용해 왔습니다.

사용했던 코드는 다음과 같습니다:

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

.docked 클래스는 헤더가 뷰포트의 상단에 닿는 순간 헤더 컨테이너에 추가되었습니다. 이 동작은 Beta 10 또는 11에서 변경된 것으로 보입니다.

비슷한 작업을 하고 계신 분이 계시다면, 이 문제에 대한 우회 방법이 있을까요? 제가 확인한 바로는, CSS를 사용하여 이러한 작업을 수행하는 데 도움이 되는 것이 거의 없는 것 같습니다. html 태그에 --header-offset 속성을 발견했지만, 이 용도로 사용할 수 있는지 확신이 서지 않습니다.

어떤 아이디어든 환영합니다 :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;
    }
  }
}

이 코드는 상단의 로고를 숨기고, 스크롤할 때만 표시되도록 합니다.