Fixed Position TOC/Elements/Divs disappearing after scrolling for a while

So I am trying to make a basic fixed TOC that follows the page as I scroll. (I know outliner exists, it’s horrible. I also don’t want to rely on plugins that break overtime.) Everything works fine… till I get about halfway down the page then it just disappears.

<div id="TOC"  >
<ul>
  <li><a class="internal-link" data-href="#Explore" href="#Explore" target="_blank" rel="noopener">Explore</a></li>
  <li><a class="internal-link" data-href="#New" href="#New" target="_blank" rel="noopener">New</a></li>
</ul>
</div>
#TOC{
    position: fixed;
    top: 2rem;
    right: 0;
    display: inline-block;
    float: right;
    z-index: 10;
}

I’ve figured out that there is a scroll event handler that removes content as you scroll. But this also includes fixed content currently being viewed. image

I’ve also included a Video

I don’t want to build my library using plugins that have to be maintained and break overtime. That’s a great way get stuck being dependent on specific platforms using specific plugins. I just want a basic TOC (Not the Outliner) that follows as I scroll.

I can’t create a side bar or any fixed position objects, scroll event handlers deletes/hides the side bar. Anyone have any ideas? Or anyone know how I can remove the scroll event handler from a specific div/element in Obsidian? I can’t read/write JS.

cumany/obsidian-floating-toc-plugin (github.com)

i dont know codes but i hope floating toc plugin could help you a bit