Simplemde-markdown-editor: Sticky toolbar

[jstnrs]

We are currently working with SimpleMDE and like it so far, but also had the "problem" that the toolbar disappears when the content gets higher and higher (Like the problem in #340 ). We're also using Redactor in other projects and the editor comes with a sticky toolbar function that works great for developer and user.

I think an addition like this would really complement your editor and think this isn't as easy as adding a line or two of CSS unfortunately (I think you were referencing to a fixed toolbar, which would be easy of course). It would be great to be able to configure this in a future version.

[KoenCa]

Hi I found a simple solution for this. CSS has a feature that has pretty good support for making things like headers sticky using position: sticky. MDN Docs.

CSS I used and tested in Safari, Chrome and Firefox.

.editor-toolbar {
  position: -webkit-sticky; // Safari fallback
  position: sticky; // other browsers
  top: 0px; // become fixed/sticky when toolbar goes against the top of the viewport

  // Make toolbar useable/visible when it becomes sticky
  z-index: 100;
  opacity: initial; 
  background-color: white;
  border-bottom: 1px solid #bbb;
}

  // Hovering would otherwise cause the text to become visible 'behind' the toolbar
.editor-toolbar:hover {
  opacity: initial;
} 

Hope this helps and maybe this can be incorporated in the editor as an option 👍

Browser support