Live preview — fully interactive
The prompt
Build a self-hiding sticky navbar with a scroll progress bar on top, for a long-form reading page. ## Structure - A fixed 3px .progress track pinned to the very top, containing a .progress-bar with an accent gradient - A fixed .nav just below it: logo, 3-4 text links, and a fill
Full prompt (2150 chars) unlocks after purchase
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px;Complete self-contained HTML unlocks after purchase
About this effect
Two classic long-form patterns in one chrome: a 3px accent progress bar tracks reading position via scaleX (never width, so it stays on the compositor), and the fixed navbar ducks out of view when you scroll down past 140px, then glides back the instant you reverse direction. Past 40px it picks up a blurred translucent background. Vanilla JS with rAF throttling — no dependencies.