Header die krimpt tot pil Nieuw
Volle header die bij scrollen krimpt tot een zwevende pil met alleen logo en afspraakknop. Scroll in het demovlak om het te zien.
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- 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'));
Meer uit paginasecties
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →