I am trying to fix the toolbar so that it it is visible at all times when someone scrolls down the page with the textAngular editor still in view (or alternatively scrolls down the editor itself).
Toolbar no longer visible upon scrolling:
Using position: fixed just pins it to the top of the entire page.
I have tried using the following jQuery to fix it upon scrolling when the textAngular directive is in view:
$(document).load( function() {
var textEditor = $(".ta-root");
var toolbar = $(".ta-toolbar");
$(document).on("scroll", function(e) {
if (textEditor.offset().top < $(document).scrollTop() < textEditor.offset().top + textEditor.height() ) {
toolbar.css('position', 'fixed');
} else {
toolbar.css('position', 'static');
}
});
});
Nothing is happening however. Not sure this is the best way to be attempting to alter the behaviour of an angular directive anyway. Does anyone have any idea of how I might accomplish this?
