スクロールしたときにツールバーを固定したい!
サイトの作りの都合で、ヘッダーナビゲーションが固定されている時、TinyMCEのツールバーがナビゲーションの下に隠れて固定される。
ムッ、ボタン押せない。イラッとしますね。
もう少し下で固定して欲しいのに。。。
そこで、イベントを捉えてCSSを設定するコードを入れましょ。
私の場合は、top:55と書いて、55px下に下げた。
結構これにたどり着くのは辛かった。
めちゃくちゃ調べた。
これでOKです。
initialize.js
//TinyMCE4のバージョン
$(function(){
//Stickytoolbar plugin initialized
tinymce.PluginManager.add('stickytoolbar', function(editor, url) {
editor.on('init', function() {
setSticky();
});
$(window).on('scroll', function() {
setSticky();
});
function setSticky() {
var container = editor.editorContainer;
var toolbars = $(container).find('.mce-toolbar-grp');
var statusbar = $(container).find('.mce-statusbar');
if (isSticky()) {
$(container).css({
paddingTop: toolbars.outerHeight()
});
if (isAtBottom()) {
toolbars.css({
top: '0',
bottom: statusbar.outerHeight(),
position: 'absolute',
width: '100%',
borderBottom: 'none'
});
} else {
toolbars.css({
top: 55,
bottom: 'auto',
position: 'fixed',
width: $(container).width(),
borderBottom: '1px solid rgba(0,0,0,0.2)'
});
}
} else {
$(container).css({
paddingTop: 0
});
toolbars.css({
top: 'auto',
position: 'relative',
width: 'auto',
borderBottom: 'none'
});
}
}
function isSticky() {
var container = editor.editorContainer,
editorTop = container.getBoundingClientRect().top;
if (editorTop < 0) {
return true;
}
return false;
}
function isAtBottom() {
var container = editor.editorContainer,
editorTop = container.getBoundingClientRect().top;
var toolbarHeight = $(container).find('.mce-toolbar-grp').outerHeight();
var footerHeight = $(container).find('.mce-statusbar').outerHeight();
var hiddenHeight = -($(container).outerHeight() - toolbarHeight - footerHeight);
if (editorTop < hiddenHeight) {
return true;
}
return false;
}
});
});
//TinyMCE5のバージョン
tinymce.PluginManager.add('stickytoolbar', function(editor, url) {
editor.on('init', function() {
setSticky();
});
$(window).on('scroll', function() {
setSticky();
});
function setSticky() {
var container = editor.editorContainer;
var toolbars = $(container).find('.tox-editor-header');
if ( $(container).hasClass("tox-tinymce--toolbar-sticky-on") ){
toolbars.css({
top: 55,
});
} else {
toolbars.css('top','');
}
}
});