Sticky status bar - Toolbar & panels - Examples

Sticky status bar

This example shows a long article with the Counter plugin and statusbar.sticky: true. Scroll the page — the status bar stays fixed to the bottom of the viewport until you reach the end of the editor.

Scroll down — the status bar sticks to the bottom of the viewport while you edit.

Code

<div id="entry-sticky-statusbar"></div>

<script src="/assets/redactor/plugins/counter/counter.js"></script>

const app = Redactor('#entry-sticky-statusbar', {
    plugins: ['counter'],
    statusbar: {
        sticky: true,
        stickyGap: 80
    },
    minHeight: '320px',
    content: '<h2>Section</h2><p>Long article HTML…</p>'
});

stickyGap keeps the bar from overlapping the top of the editor when the page is scrolled partway through a short document.