Progress Header pro

Turns solid on scroll with a thin line that fills to show reading progress.

Scroll inside the preview to try it.

Customize

Logo text on the left

Menu links (comma separated)

Background colour once solid

Text colour

Progress line colour

Header height (px)

Scroll distance at which the background appears (px)

Progress line thickness (px)

sticky stays inside its parent, fixed covers the whole page

import ProgressHeader from './ProgressHeader';

<ProgressHeader />

Checking your access…

Dependencies: none