CKEditor 5工具栏滚动不固定问题：长文本编辑时需保持置顶可见

方法1：CSS强制固定定位 #

直接通过CSS将工具栏固定在视口顶部，适配大多数CKEditor版本：

/* 确保编辑器容器为相对定位，避免工具栏脱离上下文 */
.ck-editor {
  position: relative;
}

/* 固定工具栏到视口顶部 */
.ck-toolbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff; /* 背景色覆盖下方内容，避免穿透 */
}

如果sticky属性不生效，改用fixed定位并调整编辑器内容区边距，避免遮挡：

.ck-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
}

/* 给编辑器内容区添加上边距，数值匹配工具栏高度 */
.ck-editor__editable {
  margin-top: 50px;
}

方法2：CKEditor 5内置粘性工具栏配置 #

如果使用CKEditor 5，直接在初始化配置中开启内置的粘性工具栏功能：

ClassicEditor
  .create(document.querySelector('#editor'), {
    toolbar: {
      sticky: true, // 启用粘性工具栏
      stickyOffset: 0 // 可选：设置工具栏距离视口顶部的偏移量
    }
    // 其他编辑器配置...
  })
  .catch(error => {
    console.error(error);
  });

该配置会自动处理滚动时的工具栏固定逻辑，无需额外编写CSS。

方法3：自定义滚动监听（兼容旧版本） #

针对CKEditor 4或更早版本，可通过JS监听滚动事件动态切换工具栏定位状态：

const editorToolbar = document.querySelector('.cke_top');
const editorContent = document.querySelector('.cke_contents');

window.addEventListener('scroll', () => {
  const toolbarTop = editorToolbar.getBoundingClientRect().top;
  if (toolbarTop <= 0) {
    editorToolbar.classList.add('cke-toolbar-fixed');
    editorContent.style.marginTop = `${editorToolbar.offsetHeight}px`;
  } else {
    editorToolbar.classList.remove('cke-toolbar-fixed');
    editorContent.style.marginTop = '0';
  }
});

/* 配套CSS */
.cke-toolbar-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

内容的提问来源于stack exchange，提问作者qwert123