使标题在粘性 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">&nbsp; &nbsp; <aside class="toc-container js-sticky">&nbsp; &nbsp; &nbsp; &nbsp; <p class="toc-title">Content Navigation</p>&nbsp; &nbsp; &nbsp; &nbsp; <div class="toc"></div>&nbsp; &nbsp; </aside></div>