TOC in Sidebar not sticky and moving up when scrolling down

[AksharPrasanna]

Description

I am having issues with the TOC on the left side of the document - the sidebar section for a site I am building to show research documents.

title: "Satellite Internet Explained. How It Works & Why It Matters"
author:
  - name: Ashwin Prasad
    qmd: /pages/team/ashwin_prasad.qmd
    image: /pages/team/images/ashwin_prasad.png
    description: Research Analyst with the high-tech geopolitics programme
date: "2025-04-25"
description: "This discussion document delivers a critical analysis of the Indian space reforms and considers pathways for developing space capabilities from a national interest perspective."
categories: 
  - "HTG"
  - "Space"
  - "Space Policy"

format:
  html:
    toc: true
    toc-depth: 2
    toc-location: left
    anchor-sections: false
    reference-location: document
    citation-location: document

I have some custom components - title-block.html

<header id="title-block-header" class="title-block">
    <div class="title-banner"></div>
    $if(title)$
    <div class="title-block-container">
        <h1>$title$</h1>
        $if(date)$
        <h3>$date$</h3>
        $endif$
        $if(description)$
        <p>$description$</p>
        $endif$
    </div>
    $endif$
</header>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const titleBlock = document.getElementById("title-block-header");
        const contentBlock = document.getElementById("quarto-content");

        if (titleBlock && contentBlock) {
            contentBlock.parentNode.insertBefore(titleBlock, contentBlock);
        }
    });
</script>

I wanted to remove the title-block-header outside the main contents page.

Now the issue is when I scroll on the article page, the TOC moves along with it and it becomes difficult for me to navigate through the sections :(

Please let me know if you need any other files

[AksharPrasanna]

_quarto.yml

format:
  html:
    theme: 
      - default
      - takshashila.scss
    fontfamily: Inter
    mainfont: Inter
    anchor-sections: false
    toc: false
    page-layout: article
    grid: 
      body-width: 1135px
      margin-width: 300px
      sidebar-width: 300px
    template-partials:
      - includes/title-block.html

[mcanouil]

Please share a small and simple reproducible example (remove everything unrelated to the issue and not relevant). In this case, please share a Git repository.

[mcanouil]

Note that the features are made based on the layout, especially when it's CSS/HTML/JavaScript.
If you intend to modify the layout, you need to understand what your changes are doing and what consequences they have on other elements.
For that, you need to use your favourite browser inspect/developer mode and/or editor to inspect the HTML code.

[AksharPrasanna]

Hey @mcanouil, thank you so much.

I was trying to re-create this with limited files. It seems like there was an overflow-x parameter set in the #quarto-document class. I'm not sure when and why I did that. I removed it, and the issue is fixed now. I will be closing the issue.

[mcanouil]

I was trying to re-create this with limited files

That's why being able to make a small/simple reproducible example usually help figure out the solution directly.
Glad you figured it out.