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

Question

I'm building a Table of Contents section on my website using tocbot , but I'm having an issue making the Title I added above it stick to the table of contents when I scroll.

Here's what I've got so far:

<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;
              }
            }

I've tried placing the title inside the div with the "js-sticky" class, but it formats them inline, instead of on top of the TOC section.

Answer 1

It looks like adding the title inside the aside should do the trick:

<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

Figured this out, for anybody who has a similar issue in future.

Using tocbot, class js-sticky was setting top: 150px; and hiding the title element beneath the Table of Contents. I overrode this setting by adding top: 110px; to the title class toc-title I had created and set it as !important .