Blog Nav

Sticky blog nav with a scroll-driven reading-progress bar.

Sticky blog nav · reading progress bar (scroll-timeline, falls back to a static 38% bar)

HTML

<nav class="lp-blog-nav is-sticky">
  <div class="lp-blog-nav-inner">
    <a class="lp-blog-brand" href="#">Michael LaPlante</a>
    <ul class="lp-blog-links">
      <li><a class="active" href="#">blog</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </div>
  <div class="lp-blog-progress"></div>
</nav>

<!-- Styles: .lp-blog-nav in src/styles/components.css.
     Drop is-sticky to render in-flow. The progress bar is scroll-driven
     (animation-timeline) with a static 38% fallback. -->