Jupyter Notebook Table of Contents (2)插件内容被顶部面板遮挡的配置方案

你之前修改.maintoolbar的样式没用，是因为目录插件的容器有独立的定位规则，和顶部工具栏的位置无关。直接针对目录容器调整样式就能解决问题：

临时生效（仅当前Notebook） #

运行以下代码，通过自定义CSS调整目录位置：

from IPython.core.display import display, HTML
display(HTML("""
<style>
/* 给非固定定位的目录添加顶部外边距 */
#toc-wrapper {
    margin-top: 80px !important;
}
/* 给固定在侧边的目录调整top偏移值 */
#toc-wrapper.toc-fixed {
    top: 80px !important;
}
</style>
"""))

可以根据实际遮挡程度调整80px的数值，直到目录完全显示。

永久生效（所有Notebook） #

如果想让所有Notebook都适配这个样式，修改Jupyter的自定义CSS文件：

1. 打开终端，进入Jupyter自定义目录：

   cd ~/.jupyter/custom/
   

   若没有custom文件夹，先创建：mkdir -p ~/.jupyter/custom
2. 创建或编辑custom.css文件，添加以下内容：

   #toc-wrapper {
       margin-top: 80px !important;
   }
   #toc-wrapper.toc-fixed {
       top: 80px !important;
   }
   

3. 保存文件后，重启Jupyter Notebook即可生效。

原理说明 #

Table of Contents (2)插件的目录容器默认ID为#toc-wrapper：当开启"固定目录"功能时，容器会新增.toc-fixed类，此时目录为固定定位（position: fixed），需要调整top值改变垂直位置；非固定状态下，用margin-top即可避开顶部面板。

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