使标题在粘性 div 上具有粘性（tocbot）

Question

我正在使用tocbot在我的网站上构建目录部分，但是我在滚动时遇到问题，使我在其上方添加的标题坚持到目录中。https://i.stack.imgur.com/vCm1K.gif 这是我到目前为止所得到的：<div id="desktop-toc" class="tiktoc">    <p class="toc-title">Content Navigation</p>    <aside class="toc-container js-sticky">        <div class="toc"></div>    </aside></div>CSS            /* Start Table of Contents styling */             .toc-container {                display: -webkit-box;                display: flex;                -webkit-box-align: right;                align-items: left;            }                            /* Extra small devices (phones, 600px and down) */            @media only screen and (max-width: 600px),            only screen and (min-width: 600px)            /* Medium devices (landscape tablets, 768px and up) */            @media(min-width: 768px) and (orientation:landscape),            only screen and (max-width: 768px)  {              .tiktoc {                display: none;              }              .toc-container {              display: none;                }            }            /* Extra large devices (large laptops and desktops, 1200px and up) */            @media only screen and (min-width: 1200px)            {                                .tiktoc {                position: absolute;                top: 175px;                left: 1150px;                bottom: 0;                width: 350px;                margin-bottom: 0;                }                                .toc {                    font-size: 16px;                    line-height: 1.6em;                    padding: 20px;                    min-width: 250px;                    max-width: 300px;                    background-color: #212121;                    color: #fff;                }我尝试将标题放在带有“js-sticky”类的 div 中，但它内联格式化它们，而不是在 TOC 部分的顶部。

Answer 1

想通了这一点，对于将来有类似问题的任何人。

使用 tocbot，类js-sticky正在设置top: 150px;和隐藏目录下方的标题元素。我通过添加top: 110px;到我创建的标题类toc-title并将其设置为!important.

Answer 2

看起来在里面添加标题aside应该可以解决问题：

<div id="desktop-toc" class="tiktoc">

    <aside class="toc-container js-sticky">

        <p class="toc-title">Content Navigation</p>

        <div class="toc"></div>

    </aside>

</div>