Header die krimpt tot pil New
Full header that shrinks into a floating pill with only logo and booking button on scroll. Scroll inside the demo area to see it.
How to use it
- Paste the HTML where the page sections should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Header die krimpt tot pil · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="nsp">
<div class="nsp__scroll" tabindex="0" aria-label="Demovlak, scroll om de header te zien krimpen">
<div class="nsp__head" role="navigation" aria-label="Hoofdmenu">
<div class="nsp__inner">
<a href="#" class="nsp__logo"><span class="nsp__dot" aria-hidden="true"></span>FysioPunt<span class="nsp__city">Leiden</span></a>
<ul class="nsp__links">
<li><a href="#">Behandelingen</a></li>
<li><a href="#">Sportfysiotherapie</a></li>
<li><a href="#">Ons team</a></li>
<li><a href="#">Vergoeding</a></li>
</ul>
<a href="#" class="nsp__cta">Afspraak maken</a>
</div>
</div>
<div class="nsp__hero">
<span class="nsp__eyebrow">Fysiotherapie · Leiden Noord</span>
<p class="nsp__title">Binnen 3 werkdagen bij ons op de behandeltafel</p>
<p class="nsp__lead">Geen verwijzing nodig. Wij werken met alle zorgverzekeraars en zeggen vooraf hoeveel behandelingen u vergoed krijgt.</p>
<span class="nsp__hint">Scroll in dit vlak <span aria-hidden="true">↓</span></span>
</div>
<div class="nsp__grid">
<div class="nsp__card"><b>Rugklachten</b><span>Gemiddeld 6 behandelingen, met oefenschema voor thuis.</span></div>
<div class="nsp__card"><b>Knie en enkel</b><span>Revalidatie na blessure of operatie, ook voor hardlopers.</span></div>
<div class="nsp__card"><b>Nek en schouder</b><span>Voor klachten door beeldschermwerk en spanning.</span></div>
<div class="nsp__card"><b>Dry needling</b><span>Gerichte behandeling van triggerpoints in de spier.</span></div>
<div class="nsp__card"><b>Bekkenfysiotherapie</b><span>Tijdens en na de zwangerschap, in een aparte ruimte.</span></div>
<div class="nsp__card"><b>Fysiofitness</b><span>Begeleid trainen in kleine groepen, € 39 per maand.</span></div>
</div>
<div class="nsp__band"><b>Vergoeding 2026</b><span>Met een aanvullende verzekering krijgt u meestal 9 tot 18 behandelingen vergoed. Wij checken het voor u.</span></div>
</div>
</div>
</div>/* Header die krimpt tot pil · NedDev · eigen werk. */
.nsp{position:relative;width:100%;align-self:flex-start;flex:none;height:500px;background:#eef6f3;color:#0b3b39;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box}
.nsp *{box-sizing:border-box}
.nsp__scroll{height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;outline:none}
.nsp__head{position:sticky;top:0;z-index:3;padding:0;transition:padding .4s cubic-bezier(.2,.8,.2,1)}
.nsp__inner{display:flex;align-items:center;gap:24px;max-width:2000px;margin:0 auto;padding:18px 32px;background:#fff;border-bottom:1px solid rgba(11,59,57,.12);border-radius:0;transition:max-width .5s cubic-bezier(.2,.8,.2,1),border-radius .5s ease,padding .4s ease,box-shadow .4s ease}
.nsp__logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:#0b3b39;text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.nsp__dot{width:14px;height:14px;border-radius:50%;background:#0e6e6a;box-shadow:inset 0 0 0 4px #7fd1c0}
.nsp__city{font-weight:500;color:#0e6e6a}
.nsp__links{list-style:none;display:flex;gap:22px;margin:0 auto;padding:0;overflow:hidden;max-width:700px;opacity:1;transition:opacity .25s ease,max-width .45s ease}
.nsp__links a{font-size:15px;color:#0b3b39;text-decoration:none;white-space:nowrap}
.nsp__links a:hover{color:#0e6e6a;text-decoration:underline;text-underline-offset:4px}
.nsp__cta{margin-left:auto;background:#0e6e6a;color:#fff;font-weight:600;font-size:14px;padding:11px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.nsp__cta:hover{background:#0b3b39}
.nsp.is-pill .nsp__head{padding:12px 16px 0}
.nsp.is-pill .nsp__inner{max-width:390px;gap:12px;border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 10px 30px -12px rgba(11,59,57,.45);border-bottom-color:transparent}
.nsp.is-pill .nsp__links{max-width:0;opacity:0;margin:0;visibility:hidden}
.nsp__hero{padding:64px 32px 48px;max-width:860px}
.nsp__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0e6e6a}
.nsp__title{font-size:clamp(28px,4.2vw,48px);font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:12px 0 14px}
.nsp__lead{font-size:16px;line-height:1.55;max-width:52ch;margin:0;color:#2c5a57}
.nsp__hint{display:inline-block;margin-top:26px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:#0e6e6a;border:1px dashed #0e6e6a;padding:6px 10px;border-radius:999px}
.nsp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 32px 32px}
.nsp__card{background:#fff;border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:6px;min-height:120px}
.nsp__card b{font-size:17px}
.nsp__card span{font-size:14px;line-height:1.5;color:#3d6663}
.nsp__band{margin:0 32px 40px;background:#0e6e6a;color:#fff;border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:6px;min-height:200px;justify-content:flex-end}
.nsp__band b{font-size:22px}
.nsp__band span{font-size:15px;line-height:1.5;max-width:56ch;color:rgba(255,255,255,.85)}
@media(max-width:760px){
.nsp__inner{padding:12px 16px}
.nsp__links{display:none}
.nsp__city{display:none}
.nsp__cta{padding:10px 14px;font-size:13px}
.nsp.is-pill .nsp__head{padding:10px 10px 0}
.nsp.is-pill .nsp__inner{max-width:100%;padding:6px 6px 6px 14px}
.nsp__hero{padding:40px 18px 32px}
.nsp__grid{grid-template-columns:1fr;padding:0 18px 24px}
.nsp__band{margin:0 18px 28px}}
@media(prefers-reduced-motion:reduce){.nsp__inner,.nsp__head,.nsp__links{transition:none}.nsp__scroll{scroll-behavior:auto}}// Header die krimpt tot pil · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.nsp');if(!w)return;
var s=w.querySelector('.nsp__scroll');
function on(){w.classList.toggle('is-pill',s.scrollTop>48);}
s.addEventListener('scroll',on,{passive:true});on();
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));
More page sections
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →