# 全局置顶通知

**URL:** <https://meta.discourse.org/t/sticky-global-notice/215038>\
**Category:** Feature\
**Created:** [2022年一月16日 21:41 UTC](https://meta.discourse.org/t/sticky-global-notice/215038 "2022-01-16T21:41:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![shaedrich](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@shaedrich](https://meta.discourse.org/u/shaedrich)\
**Post date:** [2022年一月16日 21:41 UTC](https://meta.discourse.org/t/sticky-global-notice/215038/1 "2022-01-16T21:41:07Z")

</div>

我们尝试使用了您的“全局通知”功能。但是，不幸的是，当您滚动时，它会消失。因此，我们希望它能固定显示。由于 `position:sticky` 只能应用于一个元素，而标题已经是固定元素了，因此无法通过自定义 CSS 来实现此功能。

您能否配置通知在 DOM 中的位置，以便我们将其放置在标题容器中，使其也能固定显示？

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2022年一月17日 12:10 UTC](https://meta.discourse.org/t/sticky-global-notice/215038/2 "2022-01-17T12:10:40Z")

</div>

为什么不使用横幅？：

> [@Creating a banner to display at the top of your site](https://meta.discourse.org/t/how-to-create-a-banner/153718):
>
> bookmark This guide explains different methods to create and customize banners on your Discourse site, from simple dismissible banners to more advanced options. person_raising_hand Required user level: Moderator (Dismissible banner), Administrator Banners are an effective way to communicate important information to your site visitors. This guide will walk you through various methods to create and customize banners on your Discourse site. Welcome banner A welcome banner greets new and r…

> [@Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133):
>
> discourse2Summary Versatile Banner adds a customizable banner to your site.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/versatile-banner)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-versatile-banner](https://github.com/discourse/discourse-versatile-banner)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features This theme component is an evolution of previous banner efforts. The goal is to provide more ease and flexibility through the use…

---

<div class="post-metadata">

**Author:** ![shaedrich](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@shaedrich](https://meta.discourse.org/u/shaedrich)\
**Post date:** [2022年一月17日 13:52 UTC](https://meta.discourse.org/t/sticky-global-notice/215038/3 "2022-01-17T13:52:40Z")

</div>

感谢您的推荐，但这并不能解决上述问题：全局通知不可固定，多功能横幅也不可固定。正如我进一步描述的，这仅通过 CSS 是无法实现的，因为多功能横幅在 DOM 中使用的位置与全局通知相同，而该位置位于固定页眉容器之外。

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2022年一月17日 14:14 UTC](https://meta.discourse.org/t/sticky-global-notice/215038/4 "2022-01-17T14:14:23Z")

</div>

说得有理。

另一个选择是 [Layouts 插件](https://meta.discourse.org/t/custom-layouts-plugin/55208)，它添加了可以固定的侧边栏。它还有一个自定义 HTML 小部件，可用于添加任何您喜欢的内容。

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2022年一月18日 17:45 UTC](https://meta.discourse.org/t/sticky-global-notice/215038/5 "2022-01-18T17:45:37Z")

</div>

如果将 sticky 应用于父容器，它将起作用……不过，如果此容器中有其他警报，它们也会粘住（例如“您想在有人回复您的帖子时收到实时通知吗？”警报）。

我们有一个 CSS 属性可以正确地将顶部偏移量与标题分开：

```css
#main-container.container {
    position: sticky;
    top: var(--header-offset);
    z-index: 9;
}

```