停靠的标题栏中的徽标

[helmi]

在我们的论坛上，我们在 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 属性，但不确定它是否可用于此类事务。

欢迎任何想法

[Don]

你好

我认为你可以使用 @Johani 的绝妙解决方案。

Header scroll shadow

You can add something like to the header tab of your theme <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 IntersectionObse…

---

类似这样

创建一个新组件并添加以下内容。

Header section

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

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

这将隐藏顶部的徽标，并且仅在滚动时显示。