Quarto生成HTML页面粘性侧边栏失效问题求助

样式未生效的原因 #

• CSS语法错误：position:sticky后面缺少分号，导致后续top:0规则不被浏览器识别
• 父容器溢出属性干扰：Quarto默认的panel-tabset容器可能设置了overflow:hidden，会阻断position:sticky的粘性定位逻辑
• 未设置侧边栏高度限制：若侧边栏内容过长，没有固定高度的话，粘性效果会不符合预期

实现预期效果的步骤 #

1. 修复CSS语法问题，同时添加必要的样式规则来处理父容器和滚动需求：

.panel-sidebar {
  position: sticky;
  top: 0;
  /* 限制侧边栏高度为视口高度减去标题栏高度，避免内容溢出视口 */
  max-height: calc(100vh - 80px);
  /* 默认隐藏滚动条 */
  overflow-y: hidden;
  /* 保留默认内边距 */
  padding: 1rem;
}

/* 鼠标hover时显示滚动条并允许滚动 */
.panel-sidebar:hover {
  overflow-y: auto;
}

/* 修正父容器溢出属性，确保粘性定位生效 */
.panel-tabset {
  overflow: visible;
}

2. 将上述CSS替换原代码中的CSS块，重新渲染即可实现侧边栏固定、hover滚动的效果。

验证后的完整代码示例：

---
title: "Test"
title-block-banner: true
format:
  html:
    theme: default
---

```{css, echo=FALSE}
.panel-sidebar {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 80px);
  overflow-y: hidden;
  padding: 1rem;
}

.panel-sidebar:hover {
  overflow-y: auto;
}

.panel-tabset {
  overflow: visible;
}

::: panel-tabset

Test1 #

::: panel-fill
A long list of things and a long table:

library(tidyverse)
library(reactable)
reactable(mtcars, defaultPageSize=100)

:::

::: panel-sidebar
Something that I want to be stick on top when I scroll the page



添加更多内容测试滚动效果：

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Line 15

Line 16

Line 17

Line 18

Line 19

Line 20
:::
:::

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