My goal is to set up a Table of Contents (TOC) in Obsidian that remains visible as you scroll through the page. Everything functions properly until you reach about halfway down the page, at which point the TOC mysteriously vanishes.
#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 attempted using both classes and IDs for the TOC. It seems that there is a scrolling event associated with the main class that causes other elements to disappear from view as you scroll past them.
Due to my lack of knowledge in Javascript, I have resorted to adding images with text to troubleshoot. Upon inspecting the element, I discovered the following:
Once I scroll past the midpoint of the page, the TOC disappears completely.
All I want is for the TOC to remain fixed in the corner. How can I eliminate the scrolling event affecting the TOC? Removing the scrolling event entirely resolves the issue, but it resets upon app restart or refresh.
Is there a way to assign a specific class/div/ID to the TOC and disable the scrolling event for that particular element? If not, how can I remove the scrolling event altogether?
I anticipated the TOC to maintain a fixed position in the corner (sticky positioning did not work). The problem arises when the scrolling event handler dynamically hides divs and classes that are out of view.