使标题在粘性 div 之上变粘（tocbot）

Question

我正在使用 tocbot 在我的网站上构建一个 Table 的目录部分，但是我在将上面添加的标题固定在 table 上时遇到了问题滚动时的内容。

这是我目前得到的：

<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;
                }
                .toc-title {
                    font-size: 22px;
                    font-weight: bolder;
                    padding-bottom: 10px;
                    position: sticky;
                    text-align: left;
                    color: var(--primary-foreground-color);
                }
                .is-active-link::before {
                background-color: #FE0152;
              }
            }

我试过将标题放在带有“js-sticky”class 的 div 中，但它会将它们格式化为内嵌格式，而不是放在目录部分的顶部。

Answer 1

看起来在 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>

Answer 2

为将来遇到类似问题的任何人解决这个问题。

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

来覆盖此设置

使标题在粘性 div 之上变粘（tocbot）

Making title sticky on top of sticky div (tocbot)

html

javascript

css

sticky