Toolbar not sticking in Reading mode

[chrisgurney]

Description of the bug

In Reading mode, with the default theme, for example, sticky toolbars do not stick on scroll.

Steps to reproduce

1. With a sticky toolbar, switch to Reading mode.
2. With lots of content in the note, scroll the view down.

Expected behavior

Toolbar should stick.

Desktop environment:

• OS: macOS
• Obsidian version: 1.5.11
• Note Toolbar version: 1.4.7

[chrisgurney]

@FelipeRearden If you're able, can you confirm if sticky toolbars work for you in Reading mode or not?

They're not working for me, and I spent some time last night trying to figure out why.

Technical Notes

• I'm not sure there's a CSS solution to this issue, due to ancestors using overflow: hidden perhaps?
• If the parent element has a: cm-sizer class (Editing) → works ; mod-header class (Reading) → does not work

[FelipeRearden]

@FelipeRearden If you're able, can you confirm if sticky toolbars work for you in Reading mode or not?

Sure I will test and get back to you. Sorry for the late reply, I almost lost this message 🙏

[FelipeRearden]

@FelipeRearden If you're able, can you confirm if sticky toolbars work for you in Reading mode or not?

🚫 Unfortunately, I can confirm that sticky toolbars NOT WORKING for me in Reading mode.

✅I did I clean install of Note Toolbar on version 1.4.11
✅ No CSS snippets

💡 Maybe the CSS wizards from theme-dev on Discord could help
💡 On Mobile there is a Mobile toolbar on the bottom of the screen that sticky in RM. Maybe some CSS from that container could help

🙏 I let you know if some insight sparks in my head. I am trying to remember if there is a plugin that has a container that sticky in RM

[FelipeRearden]

I let you know if some insight sparks in my head. I am trying to remember if there is a plugin that has a container that sticky in RM

My memory never fails me. I knew we have a plugin with a sticky bar on top…

From the legend obsidian plugin developer tadashi-aikawa -> https://github.com/tadashi-aikawa/obsidian-old-note-admonitor

Maybe this plugin could help us 🙏 🙏 🙏

[chrisgurney]

@FelipeRearden Thanks for this!

I haven't tried the plugin yet, but looking at their code, they're inserting a bar directly under the editor's navigation bar at the top, which is probably pretty reliable and less likely to be affected by a theme (bonus).

My thought then would be to continue to inject the toolbar as it is now, but use an IntersectionObserver to watch it as it scrolls under the nav bar. When that happens, switch to a toolbar div (probably pre-rendered) that appears in that location (or perhaps just move it there).

The question I have is whether this is something I should do for just Reading mode, or change how it's rendered overall to use this approach. I would keep the sticky attribute available in the CSS for Callouts.

This is something worth testing to make sure it still provides a smooth experience, for sure!

[FelipeRearden]

Hello @chrisgurney !

The question I have is whether this is something I should do for just Reading mode, or change how it's rendered overall to use this approach

I am gonna share with my humble opinion as a user and plugin tester for desktop and mainly for mobile. What you achieve here on keyboard navigation in something rare to occurs.

The user experience in flawless which is something difficult to achieve specially for Mobile. That’s why I was so so worried about the feature because I struggled in the past with the developers to achieve an experience equal to what we have here in your plugin.

Believe me managing the active note focus while switch between containers in mobile in a nightmare and we dont have problems here 🙏

This way, my humble opinion would be to isolate a new approach only for reading mode because we dont have to deal with the focus (caret cursor) in the active note (for the UI behavior perspective and trigger command perspective)

As you know, I am here with you no matter what and I can help with all the tests ☀️

[chrisgurney]

@FelipeRearden This is next on my list!

[FelipeRearden]

@FelipeRearden This is next on my list!

Thanks for the feedback @chrisgurney !!!!!

Great news and sending to you positive energy to find an easy solution 🙏 🙏 🙏 🙏

[CCerrer]

Got this bug too
Hope you find a solution, gl bro

[chrisgurney]

Hello all, I've been working at this for almost two weeks, and unfortunately have not been able to find a reliable solution, perhaps due to the constraints of plugins, or perhaps due to me still learning, or perhaps both.

Instead, I've opted to release the beta as-is with a number of features that have been suggested by the community.

One such suggestion was adding a way to permanently stick the toolbar to the top, which you can now do with the Position setting. This will keep the toolbar at the top of the view in both Editing/Source and Reading/Preview modes, which may address the desired UX that some of you had.

Other learnings:

• Not all was lost, as working on this problem helped me provide a solution for the Position setting.
• I've also laid the groundwork for a future "context" setting, which should allow you to set the position and hide items based on platform and view mode, which might be even closer to desired behavior for more of you.
• I'm open to pairing with a more seasoned developer than I in the future, to perhaps take another stab at this. I now know more about Intersection and MutationObservers than I did before I started, but I'm still a relative newbie.

I'd love help testing the beta (via BRAT)! If you haven't used BRAT before, instructions are here.