Prevent Removing Elements with position: sticky or position: fixed from the DOM

[SomeRandomGuy2]

Use case or problem

I have a note that includes a dataview query, which embeds all notes from a specific folder and displays them as a set of cards. This results in a very lengthy note. Since each card-note is color-coded, I created a color legend using a callout. I set this legend to always remain visible in the corner of the screen using the CSS property position: fixed;. However, here’s the issue:

After scrolling down, the legend-callout is removed from the DOM. As explained in this forum thread, this behavior is intended to improve performance. But as a result, my legend-callout becomes unusable because it’s only visible at the very top of the note.

I’ve looked for plugins to address this issue, but I’ve only found solutions for very specific cases, none of which meet my needs.

Proposed solution

I propose keeping the current DOM-removal behavior for performance optimization but making an exception for elements with position: sticky or position: fixed. This approach would allow for a performance boost by rendering fewer elements, while still supporting fixed or sticky elements. It could benefit many use cases, like keeping note headers, footers, or floating headers/TOCs visible without requiring additional plugins.

[Graywaren]

I requested similar here:

Ability To Prevent DOM Element Removal In Active Note, Nav Tree, etc

(I’m not sure if this is the right section for this, or if it should be in the custom css section, if so let me know and I can re post it in the right section) Use case or problem Custom css that relies on nth child/of type etc. doesn’t work correctly due to obsidian removing elements from the dom when they go off screen from scrolling, whether or not they’re still in the active note or nav tree, making it impossible to iterate through the entire nav tree/section/note and have a specific elemen…

I almost reported it as a bug before I figured out it was intentional. It makes it impossible to do quite a number of typical css things. I definitely agree with your idea of having it exclude sticky and fixed items.