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

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.

2 Likes

I requested similar here:

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.