Docusaurus 2 如何实现滚动时公告横幅固定在页面头部上方？

可以实现，通过自定义CSS修改默认样式即可完成，不需要调整原有组件结构，具体操作步骤如下：

步骤1：添加自定义CSS规则 #

打开项目下的src/css/custom.css文件，添加如下样式代码：

/* 固定公告栏到页面最顶部 */
.announcementBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 取值大于默认导航栏z-index（默认值100）即可，避免被导航栏遮挡 */
  z-index: 200;
}

/* 导航栏添加顶部偏移，避免被公告栏挡住 */
.navbar {
  margin-top: var(--docusaurus-announcement-bar-height);
}

/* 页面主内容区添加顶部偏移，避免内容被两个顶部栏遮挡 */
.main-wrapper {
  padding-top: calc(var(--docusaurus-announcement-bar-height) + var(--ifm-navbar-height));
}

如果你的公告栏支持关闭操作，需要额外添加以下兼容样式，避免关闭后页面顶部出现空白：

/* 公告栏关闭后恢复导航栏与内容区的默认偏移 */
body.announcement-bar-close .navbar {
  margin-top: 0;
}

body.announcement-bar-close .main-wrapper {
  padding-top: var(--ifm-navbar-height);
}

步骤2：验证生效 #

执行npm run start重启本地开发服务，滚动页面即可看到公告栏始终固定在页面顶部，不会跟随滚动消失。

注意事项 #

• 如果你之前自定义过导航栏或公告栏的z-index属性，需要对应调整上述CSS中.announcementBar的z-index值，保证其大于导航栏的z-index即可
• 如果你修改过页面内容区的默认布局规则，需要对应调整main-wrapper的padding-top计算逻辑，避免内容出现遮挡或多余空白

内容的提问来源于stack exchange，提问作者Chad H