页眉滚动阴影

贡献 用户体验
1

在滚动浏览 https://forum.ghost.org/ 论坛时，标题栏会出现阴影。我看到他们使用了以下 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：

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

当我将上述 CSS 添加到我自己的论坛时，无法得到相同的效果。

2

他们添加了一些自定义 JavaScript，在滚动时为 header 添加 .scrolling 类，Discourse 默认并不这样做（不过效果确实不错！）。

4 个赞
3

我希望默认使用这个 CSS 类。我觉得它看起来也很不错。

4

您可以在主题的“头部”标签页中添加类似以下内容：

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

这将在头部包装器上添加一个 sticky 类，并允许您在滚动时头部“固定”到顶部时设置自定义 CSS。

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

我深表感激。非常感谢你。

1 个赞
7

我注意到了这一点。这段代码会阻止 PWA 应用程序运行。

8

我需要更多细节来调试这个问题。

如果移除该代码，您的 PWA 应用能否正常运行？
您是否已将其添加到主题的 header 选项卡中？
您使用什么设备/操作系统进行测试？

1 个赞
9

是的，添加了主题头部。移除代码后，PWA 仍继续运行。我在安装了 Ubuntu 20.04 并按官方安装说明配置的服务器上进行了测试，测试环境包括 Android 11 设备和 PC 上的 Chrome 浏览器，均在实时站点上验证。