Home Work
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
LegalHealthcareReal estateFinanceHospitality
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

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.

Fysiotherapie · Leiden Noord

Binnen 3 werkdagen bij ons op de behandeltafel

Geen verwijzing nodig. Wij werken met alle zorgverzekeraars en zeggen vooraf hoeveel behandelingen u vergoed krijgt.

Scroll in dit vlak
RugklachtenGemiddeld 6 behandelingen, met oefenschema voor thuis.
Knie en enkelRevalidatie na blessure of operatie, ook voor hardlopers.
Nek en schouderVoor klachten door beeldschermwerk en spanning.
Dry needlingGerichte behandeling van triggerpoints in de spier.
BekkenfysiotherapieTijdens en na de zwangerschap, in een aparte ruimte.
FysiofitnessBegeleid trainen in kleine groepen, € 39 per maand.
Vergoeding 2026Met een aanvullende verzekering krijgt u meestal 9 tot 18 behandelingen vergoed. Wij checken het voor u.

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. 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>

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 →