How do I remove a scrolling event handler from a specific element/class?

Question

I am trying to create a TOC in Obsidian that follows as you scroll. Everything works correctly till you get between 25-50% of the page and then the TOC just disappears.

#TOC,
.TOC {
  position: fixed;
  top: 2rem;
  right: 0;
  display: inline-block;
  float: right;
  z-index: 10;
}

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

I've tried with TOC as both a class and using an ID. So turns out there is a scrolling event tied to the main class that seems to hide other classes as they leave the view.

I have no idea how to read or write js so I've added images with text. Using inspect element I've found this

After scrolling down halfway TOC disappears.

All I want is the TOC to stay in the corner. How can I remove the scrolling event from the TOC? When I delete the entire scrolling event everything works perfectly. But obviously it reloads every time you restart the app or refresh.

What I want is to either have a specific class/div/id for TOC and have the event disabled for that class. If can't do that, how can I just remove it all together?

I expected the TOC to stay in the corner with a fixed position (sticky does nothing). It works till the scrolling event handler dynamically removes/ hides divs and classes that aren't in view.

Answer 1

Good luck with this one. I'm not sure it's possible, but maybe it is with some JavaScript.

Obsidian seems to render only part of a page at a time. I wrote a CSS snippet to add captions to images and videos and number them. If there were more than a couple of either, scrolling down the page would cause the numbering to start over from the beginning.

Here's what I wrote

.workspace-leaf-content {
    counter-reset: figures;
    counter-reset: videos;
}

.internal-embed.image-embed.is-loaded {
    counter-increment: figures;
}

.internal-embed.media-embed.is-loaded {
    counter-increment: videos;
}

.image-embed::after {
    display: block;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 90%;
    content: 'Fig. ' counter(figures) '. ' attr(alt);
}

.media-embed::after {
    display: block;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 90%;
    content: 'Vid. ' counter(videos) '. ' attr(alt);
}

.internal-embed+.footnote-ref,
.media-embed+.footnote-ref {
    display: inline-block;
    vertical-align: bottom;
}

.image-embed,
.media-embed {
    margin-left: initial;
}