时间戳

首页 > 解决方案 > Docusaurus 2 - 粘性公告横幅

docusaurus - Docusaurus 2 - 粘性公告横幅

问题描述

是否可以在滚动标题上方“粘贴”公告横幅？如果是这样，怎么办？我需要始终显示横幅，但它也不是标题。

谢谢！

标签： docusaurus

解决方案

这是简单的方法，尽管它会在标题下方。但是向下滚动后它会粘在顶部。

1）向下滚动之前： 向下滚动之前

2）向下滚动后： 向下滚动后

如何：

0）确保您在您的设置自定义主题docusaurus.config.js：

module.exports = {
[…]
  presets: [
  [
      '@docusaurus/preset-classic',
      […]    
      theme: {
          customCss: require.resolve('./src/css/custom.css'),
      },
  ],
[…]

1）将此添加style到您的custom.css- 这是一个示例，修改以满足您的需求：

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

2)将 div 容器添加到您的markdown文件中 - 此 div 将接收广告内容，因此您可以随意修改：

# Lorem Ipsum

<div className="sticky"></div>

Lorem Ipsum is simply…

推荐阅读