使用sphinxdoc主题时，如何滚动页面保持侧边TOC可见？

嗨，这个问题我刚好碰到过——确实是CSS布局的问题，sphinxdoc主题默认没给侧边TOC做固定定位，所以滚动页面时会跟着页面顶部跑，超出视野范围。给你两个靠谱的解决方案：

sphinxdoc主题的侧边栏容器用的是.sphinxsidebar类，我们可以通过自定义CSS覆盖默认样式，把它改成固定定位：

1. 先在你的Sphinx项目根目录创建_static文件夹（如果还没有的话），然后在里面新建custom.css文件。
2. 打开项目的conf.py，添加配置让Sphinx加载这个自定义CSS：

html_css_files = [
    'custom.css',
]

3. 在custom.css里写入以下样式：

/* 固定侧边栏，使其随滚动保持可见 */
.sphinxsidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* 占满整个视口高度 */
    overflow-y: auto; /* 侧边栏内容过长时允许滚动 */
    width: 230px; /* 匹配sphinxdoc主题默认的侧边栏宽度，可按需调整 */
    padding-top: 20px; /* 避免顶部内容贴边 */
}

/* 调整主内容区的左边距，防止被固定侧边栏遮挡 */
div.body {
    margin-left: 250px; /* 比侧边栏宽度多20px，留出间隙 */
}

这样设置后，侧边TOC就会固定在页面左侧，滚动页面时始终保持可见，主内容区也不会被遮挡。

如果不想自己折腾CSS，更简单的办法是换成Sphinx官方文档用的alabaster主题，或者更现代的furo主题——这些主题默认就内置了固定侧边TOC的功能，而且在Read the Docs上兼容性拉满。

只需要修改conf.py里的html_theme配置就行：

# 换成和Sphinx官方文档风格一致的alabaster主题
html_theme = 'alabaster'

# 或者换成更现代的响应式主题furo
# html_theme = 'furo'

切换后不需要额外配置，Read the Docs会自动加载主题的样式，TOC自然就固定在侧边了。

如果用自定义CSS，记得考虑移动端的适配，避免小屏幕下侧边栏占满空间影响阅读。可以在custom.css里加个媒体查询：

@media screen and (max-width: 768px) {
    .sphinxsidebar {
        position: relative;
        width: 100%;
        height: auto;
    }
    div.body {
        margin-left: 0;
    }
}

另外，部署到Read the Docs时，要确保_static文件夹被正确纳入版本控制，不然自定义CSS不会生效哦。

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