Floating properties pinned to the side of the note when scrolled

[Anwen]

What I’m trying to do

I’ve created a css that allows me to reduce the properties to a small square on the left side of the note, over which you can hover the mouse to see the properties. But it’s just at the top of the note. I’d like to be able to keep it visible even when I’m scrolling through the note. Does anyone have any idea how to do this?

Voici mon css:

.is-mobile {
    pre.frontmatter {
      float: left;
      position: absolute;
      left: .15em;
      top: .65rem;
      width: 5rem;
      height: 5rem;
      overflow: hidden;
      border: none !important;
      background-color: transparent;

      code {
        visibility: hidden;
      }

      .mod-failed {
        position: absolute;
        .mod-error {
          visibility: hidden;
        }
        &:hover .mod-error , &:focus-within .mod-error{
          visibility: visible;
        }
      }

      &::before {
        content: "✧";
        font-size: 50px;
        color: var(--primary-accent-3);
        float: left;
      }
      &:not(:hover) > button.copy-code-button {
        display: none;
      }
      &:hover , &:focus-within{
        border: 1px solid var(--background-modifier-border);
        border-radius: 8px !important;
        background-color: var(--background-secondary);
        filter: drop-shadow(-.1rem .1rem .1rem var(--background-secondary-alt));
        width: 60%;
        min-width: 200px;
        height: unset;
        z-index: 3;

        code {
          visibility: visible;
          background-color: var(---background-secondary);
        }
      }
    }
}



  .workspace-leaf-content[data-type=markdown] .metadata-container,
  .workspace-leaf-content[data-type=markdown] .frontmatter-container {
    float: left;
    position: absolute;
    left: 2.3rem;
    top: 2rem;
    width: 2rem;
    height: 2.2rem;
    overflow: hidden;
    border: none;
    background-color: transparent;

    .workspace-leaf-content[data-type=markdown] .metadata-properties-heading,
    .workspace-leaf-content[data-type=markdown] .metadata-content,
    .workspace-leaf-content[data-type=markdown] .frontmatter-container-header,
    .workspace-leaf-content[data-type=markdown] .frontmatter-section {
      visibility: hidden;
    }
    &::before {
      content: "‎   M  ‎ ";
      color: beige ;
      font-size: 15px;
      float: left;
      border-width: 2px;
      border-color: var(--link-external-color) ;
      background-color: var(--link-external-color);
      border-radius: 9px !important;
      padding: 1px;
    }
    &:hover , &:focus-within {
      .metadata-properties-heading,
      .frontmatter-container-header,
      .metadata-content,
      .frontmatter-section {
        visibility: visible;
      }
      .frontmatter-collapse-indicator {
        display: none;
      }
    }
  }


  body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-container > div > div > div.view-content > div.markdown-source-view.cm-s-obsidian.mod-cm6.is-folding.show-properties.is-readable-line-width.node-insert-event.is-live-preview.query-list.hide_properties.show_add_property_btn.query-neutral.query-no-border > div.cm-editor.ͼ1.ͼ2 > div.cm-scroller > div.cm-sizer > div.metadata-container > div.metadata-properties-heading > div.collapse-indicator.collapse-icon {
      display: none;
  }
  body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-container > div > div > div.view-content > div.markdown-reading-view > div > div > div.mod-header > div.metadata-container > div.metadata-properties-heading > div.collapse-indicator.collapse-icon {
      display: none;
  }
  body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-container > div.workspace-leaf.mod-active > div > div.view-content > div.markdown-source-view.cm-s-obsidian.mod-cm6.is-folding.is-live-preview.show-properties.is-readable-line-width.node-insert-event > div.cm-editor.ͼ1.ͼ2 > div.cm-scroller > div.cm-sizer > div.metadata-container > div.metadata-properties-heading > div.collapse-indicator.collapse-icon {
      display: none;
  }

  .workspace-leaf-content[data-type=markdown] .frontmatter-container:hover, .workspace-leaf-content[data-type=markdown] .frontmatter-container:focus-within {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px !important;
    background-color: var(--background-primary);
    filter: drop-shadow(-.1rem .1rem .1rem var(--background-modifier-border));
    width: 50%;
    min-width: 200px;
    height: unset;
    z-index: 3;


  }
  .workspace-leaf-content[data-type=markdown] .metadata-container:hover ,.workspace-leaf-content[data-type=markdown] .metadata-container:focus-within {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px !important;
    background-color: var(--background-primary);
    filter: drop-shadow(-.1rem .1rem .1rem var(--background-modifier-border));
    width: 80%;
    min-width: 200px;
    height: unset;
    z-index: 3;
  }

Here’s what it looks like:

And I wish that even when I’m scrolling, I could see it there:

[Anwen]

I finally found the technique. All I had to do was change the position to fixed instead of absolute in this:

  .workspace-leaf-content[data-type=markdown] .metadata-container,
  .workspace-leaf-content[data-type=markdown] .frontmatter-container {
    float: left;
    position: absolute;
    left: 2.3rem;
    top: 2rem;
    width: 2rem;
    height: 2.2rem;
    overflow: hidden;
    border: none;
    background-color: transparent;

to this:

  .workspace-leaf-content[data-type=markdown] .metadata-container,
  .workspace-leaf-content[data-type=markdown] .frontmatter-container {
    float: left;
    position: fixed;
    left: 2.3rem;
    top: 2rem;
    width: 2rem;
    height: 2.2rem;
    overflow: hidden;
    border: none;
    background-color: transparent;