Author: | MadeByMike |
---|---|
Views Total: | 5,966 views |
Official Page: | Go to website |
Last Update: | January 15, 2017 |
License: | MIT |
Preview:

Description:
A pure CSS solution to create a fixed header progress bar indicating how far you have scrolled. Powered by @supports CSS at-rule.
Preview:
Create the fixed header.
<header> <h1>Scroll Indicator</h1> </header>
header { position: fixed; top: 0; height: 125px; width: 100%; background: white; } header { padding: 10px 10%; box-sizing: border-box; }
Add main content to the main element as follow:
<main> ... </main>
main { margin-top: 128px; } main { padding: 10px 10%; box-sizing: border-box; }
The main CSS to calc the scroll position and update the scroll bar on page scroll.
@supports (height: 100vh) { body { background: linear-gradient(to right top, #0089f2 50%, #DDD 50%); background-size: 100% calc(100% - 100vh + 129px); background-repeat: no-repeat; } body:before { content: ''; position: fixed; top: 128px; bottom: 0; width: 100%; z-index: -1; background: white; } }