In this tutorial I will show you how to keep the toolbar from quill js editor sticky when you have a big data in your editor. Even if you can use the second theme from quill js, in some cases the toolbar which is all the time visible is better. In order to keep the toolbar all the time of the top of the quill content editor we need to make few check with javascript and add some css to the toolbar in order to stay at the top of its parent all the time we scroll only in the quill content.

Quill js sticky toolbar

The following are the steps you need to implement in order to achive this:

First of all we will have to use the following jquery code:

jQuery('.scrollable_element').on('scroll', function(){
  var content_area = jQuery('#content_textarea').outerHeight(),
    offset_top = jQuery(this).scrollTop();
  if(content_area >= offset_top){
    jQuery('.sticky_element').css('top', offset_top);
  }
});

What the above function does? It calculate the full height of the content area and the top offset scrolled from parent element and then it add the scrolled distance in px to our toolbar in order to stau top. Let me know if this method worked for you.