Leesvoortgang met getal en sectienaam Nieuw

Dunne verticale voortgangslijn langs een lang artikel met in de hoek het percentage en de naam van de huidige sectie ("37% · Vergunning"). Klik op de hoek opent een inhoudsopgave die naar de secties springt. De lijn draait op een CSS scroll-timeline met timeline-scope (zonder ondersteuning zet JS hem); getal en sectie komen uit een lichte scroll-meting. Voor lange dienst- en kennisbankpagina's.

Kennisbank · Dakwerken Visser, Zwolle

Wat kost een dakkapel in 2026?

Een eerlijk overzicht van prijs, regels en planning, op basis van 120 dakkapellen die we in 2025 plaatsten.

Prijs per meter

Een prefab dakkapel van 3 meter breed kost bij ons inclusief plaatsing tussen € 9.500 en € 12.800. Kunststof kozijnen zijn het voordeligst, hout kost circa € 900 meer.

Rolluiken, extra isolatie en een tweede raam rekenen we los, zodat je precies ziet waar je voor betaalt.

Vergunning

Aan de achterkant is vaak geen vergunning nodig, aan de voorkant meestal wel. We checken het voor je in het Omgevingsloket voordat je tekent.

Woon je in een beschermd stadsgezicht, reken dan op acht weken extra.

Planning

De dakkapel wordt in onze werkplaats in vier tot zes weken gebouwd. Plaatsen duurt één dag; de kraan staat er een ochtend.

Binnen afwerken doen we in de dagen erna, of je doet het zelf.

Subsidie

Voor dakisolatie kan in sommige gevallen ISDE-subsidie gelden. Kijk voor de actuele voorwaarden op rvo.nl; wij leveren de isolatiewaarden aan.

[ Einde artikel · 3 min lezen ]

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.

<!-- Leesvoortgang met getal en sectienaam · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="svp"><div class="svp__sc" tabindex="0" aria-label="Artikel: wat kost een dakkapel in 2026"><article class="svp__art">
<p class="svp__k">Kennisbank · Dakwerken Visser, Zwolle</p><h4 class="svp__h">Wat kost een dakkapel in 2026?</h4>
<p>Een eerlijk overzicht van prijs, regels en planning, op basis van 120 dakkapellen die we in 2025 plaatsten.</p>
<h5 data-sec="Prijs">Prijs per meter</h5><p>Een prefab dakkapel van 3 meter breed kost bij ons inclusief plaatsing tussen € 9.500 en € 12.800. Kunststof kozijnen zijn het voordeligst, hout kost circa € 900 meer.</p><p>Rolluiken, extra isolatie en een tweede raam rekenen we los, zodat je precies ziet waar je voor betaalt.</p>
<h5 data-sec="Vergunning">Vergunning</h5><p>Aan de achterkant is vaak geen vergunning nodig, aan de voorkant meestal wel. We checken het voor je in het Omgevingsloket voordat je tekent.</p><p>Woon je in een beschermd stadsgezicht, reken dan op acht weken extra.</p>
<h5 data-sec="Planning">Planning</h5><p>De dakkapel wordt in onze werkplaats in vier tot zes weken gebouwd. Plaatsen duurt één dag; de kraan staat er een ochtend.</p><p>Binnen afwerken doen we in de dagen erna, of je doet het zelf.</p>
<h5 data-sec="Subsidie">Subsidie</h5><p>Voor dakisolatie kan in sommige gevallen ISDE-subsidie gelden. Kijk voor de actuele voorwaarden op rvo.nl; wij leveren de isolatiewaarden aan.</p>
<p class="svp__eind">[ Einde artikel · 3 min lezen ]</p></article></div>
<div class="svp__lijn" role="progressbar" aria-label="Leesvoortgang" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div>
<button class="svp__hoek" type="button" aria-expanded="false"><span class="svp__pct">0%</span><span class="svp__sec">Intro</span></button>
<div class="svp__toc" hidden><p class="svp__tt">Inhoud</p></div></div>
</div>

/* Leesvoortgang met getal en sectienaam · NedDev · eigen werk. */
.svp{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;timeline-scope:--svp-tl;container-type:size}
.svp__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scroll-timeline:--svp-tl y}
.svp__sc::-webkit-scrollbar{display:none}
.svp__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.svp__art{padding:16px 18px 64px 28px;max-width:62ch;font-size:13px;line-height:1.6;color:#2a2a2a}
.svp__art p{margin:0 0 10px}
.svp__k{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#666}
.svp__h{margin:0 0 8px;font:700 clamp(17px,6cqi,32px)/1.08 'Switzer',sans-serif;letter-spacing:-.02em;color:#0a0a0a}
.svp__art h5{margin:18px 0 6px;font:700 15px 'Switzer',sans-serif;color:#0a0a0a;scroll-margin-top:12px}
.svp__eind{font:500 10px 'JetBrains Mono',monospace;color:#888}
.svp__lijn{position:absolute;left:12px;top:14px;bottom:14px;width:2px;background:#eceae6;border-radius:2px;overflow:hidden}
.svp__lijn i{display:block;width:100%;height:100%;background:#F5480F;transform-origin:0 0;transform:scaleY(0)}
@supports (animation-timeline: scroll()){.svp__lijn i{animation:svp-vul linear both;animation-timeline:--svp-tl}}
@keyframes svp-vul{to{transform:scaleY(1)}}
.svp__hoek{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;border:0;background:#0a0a0a;color:#fff;font:600 11px/1 'JetBrains Mono',monospace;cursor:pointer;transition:background .18s}
.svp__hoek:hover{background:#333}
.svp__hoek:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.svp__pct{color:#F5480F;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.svp__sec{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svp__toc{position:absolute;right:10px;bottom:46px;min-width:160px;background:#fff;border:1px solid rgba(10,10,10,.15);border-radius:4px;padding:6px;box-shadow:0 12px 28px -14px rgba(0,0,0,.35)}
.svp__tt{margin:2px 6px 4px;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#777}
.svp__toc button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;font:500 12px 'Switzer',sans-serif;padding:6px;border:0;border-radius:3px;background:transparent;color:#0a0a0a;cursor:pointer}
.svp__toc button:hover{background:#f4f3f1}
.svp__toc button:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.svp__toc button[aria-current]{font-weight:700}
.svp__toc button[aria-current]::after{content:'';width:6px;height:6px;border-radius:50%;background:#F5480F;align-self:center}

// Leesvoortgang met getal en sectienaam · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.svp')||root;function lab_drift(sc,host,speed){if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;var on=true,t0=0;function stop(){on=false;}
['wheel','touchstart','pointerdown','keydown','focusin'].forEach(function(ev){host.addEventListener(ev,stop,{passive:true});});
function f(now){if(!on)return;if(!t0)t0=now;var max=sc.scrollHeight-sc.clientHeight,ph=(now-t0)/1000*speed;sc.scrollTop=max*(.5-.5*Math.cos(ph));requestAnimationFrame(f);}
setTimeout(function(){if(on)requestAnimationFrame(f);},900);}
var sc=root.querySelector('.svp__sc'),fill=root.querySelector('.svp__lijn i'),lijn=root.querySelector('.svp__lijn'),pct=root.querySelector('.svp__pct'),sec=root.querySelector('.svp__sec'),hoek=root.querySelector('.svp__hoek'),toc=root.querySelector('.svp__toc');
var hs=[].slice.call(root.querySelectorAll('[data-sec]')),css=window.CSS&&CSS.supports&&CSS.supports('animation-timeline: scroll()'),rm=matchMedia('(prefers-reduced-motion: reduce)').matches,tk=false,cur='';
toc.id='svp-toc-'+Math.random().toString(36).slice(2,7);hoek.setAttribute('aria-controls',toc.id);
var knoppen=hs.map(function(h){var b=document.createElement('button');b.type='button';b.textContent=h.textContent;b.addEventListener('click',function(){sc.scrollTo({top:h.offsetTop-12,behavior:rm?'auto':'smooth'});dicht();sc.focus({preventScroll:true});});toc.appendChild(b);return b;});
function upd(){tk=false;var max=sc.scrollHeight-sc.clientHeight,p=max>0?sc.scrollTop/max:0,v=Math.round(p*100);pct.textContent=v+'%';lijn.setAttribute('aria-valuenow',v);if(!css)fill.style.transform='scaleY('+p.toFixed(4)+')';
  var naam='Intro',idx=-1;hs.forEach(function(h,k){if(h.offsetTop-sc.scrollTop<sc.clientHeight*.4){naam=h.getAttribute('data-sec');idx=k;}});if(p>.985){naam='Einde';}
  if(naam!==cur){cur=naam;sec.textContent=naam;knoppen.forEach(function(b,k){if(k===idx)b.setAttribute('aria-current','true');else b.removeAttribute('aria-current');});}}
sc.addEventListener('scroll',function(){if(!tk){tk=true;requestAnimationFrame(upd);}},{passive:true});
function dicht(){toc.hidden=true;hoek.setAttribute('aria-expanded','false');}
hoek.addEventListener('click',function(){var o=toc.hidden;toc.hidden=!o;hoek.setAttribute('aria-expanded',o?'true':'false');if(o&&knoppen[0])knoppen[0].focus();});
root.addEventListener('keydown',function(e){if(e.key==='Escape'&&!toc.hidden){dicht();hoek.focus();}});
sc.addEventListener('pointerdown',dicht);
upd();lab_drift(sc,root,.22);
}
init(document.querySelector('.jouw-container'));

Meer uit scroll-effecten

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 →