Header met scrollstanden Nieuw
Header met drie standen: bovenaan transparant over de hero, na een paar pixels scrollen een lichte achtergrond met lijn en blur, bij omlaag scrollen schuift hij weg en bij omhoog komt hij direct terug. Krijgt een link in de header focus, dan komt hij altijd terug. Draait in een eigen scrollvlak; in productie hang je dezelfde code aan window. Kleine JS met requestAnimationFrame, geen nieuwe browserfeatures nodig.
Sinds 1962 in Deventer
Elke ochtend vers, vanaf 6:30 open.
Scroll in dit vlak
Vandaag uit de oven
- Desem volkoren€ 4,25
- Deventer koek, 500 g€ 5,95
- Appelflap€ 2,10
- Spelt meergranen€ 4,60
- Boterkoek, heel€ 11,50
Taarten bestel je tot 16:00 voor de volgende dag. Ophalen kan in al onze vier winkels: Brink, Keizerstraat, Colmschate en Bathmen.
Openingstijden
Ma t/m vr 6:30 tot 18:00, za 7:00 tot 17:00. Op zondag is alleen de winkel aan de Brink open, van 9:00 tot 13:00.
Scroll weer omhoog: de header komt meteen terug.
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 met scrollstanden · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hsc">
<div class="hsc__scroll" tabindex="0" aria-label="Voorbeeldpagina, scroll om de header te zien veranderen">
<div class="hsc__head" data-state="top"><a class="hsc__logo" href="#">Bakkerij Verhoef</a><span class="hsc__links"><a href="#">Brood</a><a href="#">Taarten</a><a href="#">Winkels</a></span><a class="hsc__cta" href="#">Bestel taart</a></div>
<div class="hsc__hero"><p class="hsc__kicker">Sinds 1962 in Deventer</p><p class="hsc__h">Elke ochtend vers, vanaf 6:30 open.</p><p class="hsc__hint">Scroll in dit vlak</p></div>
<div class="hsc__body">
<p class="hsc__h2">Vandaag uit de oven</p>
<ul class="hsc__list"><li><b>Desem volkoren</b><span>€ 4,25</span></li><li><b>Deventer koek, 500 g</b><span>€ 5,95</span></li><li><b>Appelflap</b><span>€ 2,10</span></li><li><b>Spelt meergranen</b><span>€ 4,60</span></li><li><b>Boterkoek, heel</b><span>€ 11,50</span></li></ul>
<p class="hsc__p">Taarten bestel je tot 16:00 voor de volgende dag. Ophalen kan in al onze vier winkels: Brink, Keizerstraat, Colmschate en Bathmen.</p>
<p class="hsc__h2">Openingstijden</p>
<p class="hsc__p">Ma t/m vr 6:30 tot 18:00, za 7:00 tot 17:00. Op zondag is alleen de winkel aan de Brink open, van 9:00 tot 13:00.</p>
<p class="hsc__p">Scroll weer omhoog: de header komt meteen terug.</p>
</div>
</div>
<span class="hsc__state" aria-hidden="true">stand: boven</span>
</div>
</div>/* Header met scrollstanden · NedDev · eigen werk. */
.hsc{position:absolute;inset:0;container-type:inline-size;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left}
.hsc *,.hsc *::before,.hsc *::after{box-sizing:border-box}
.hsc__scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.hsc__scroll:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.hsc__head{position:sticky;top:0;z-index:3;height:48px;margin-bottom:-48px;display:flex;align-items:center;gap:14px;padding:0 14px;color:#fff;border-bottom:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .25s ease,backdrop-filter .2s ease}
.hsc__head[data-state="scrolled"],.hsc__head[data-state="hidden"]{background:rgba(255,255,255,.86);color:#0a0a0a;border-bottom-color:#e6e3df;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.hsc__head[data-state="hidden"]{transform:translateY(-100%)}
.hsc__head:focus-within{transform:none}
.hsc__logo{font-weight:700;font-size:14px;letter-spacing:-.01em;color:inherit;text-decoration:none;white-space:nowrap}
.hsc__links{display:flex;gap:12px;margin-left:auto}
.hsc__links a{font-size:12.5px;color:inherit;text-decoration:none;opacity:.85;transition:opacity .15s}
.hsc__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.hsc__cta{font-size:12px;font-weight:600;color:#0a0a0a;background:#fff;border-radius:999px;padding:7px 11px;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.hsc__head[data-state="scrolled"] .hsc__cta,.hsc__head[data-state="hidden"] .hsc__cta{background:#0a0a0a;color:#fff}
.hsc__cta:hover{background:#F5480F;color:#0a0a0a}
.hsc__head a:focus-visible{outline:2px solid #F5480F;outline-offset:3px;border-radius:3px}
.hsc__hero{background:#2b211c;background-image:linear-gradient(160deg,#4a3428 0%,#2b211c 70%);color:#fff;padding:78px 16px 26px;min-height:200px}
.hsc__kicker{margin:0 0 6px;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#e9d6c3}
.hsc__h{margin:0;font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.015em;max-width:16ch}
.hsc__hint{margin:14px 0 0;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;color:#cbb8a6}
.hsc__body{padding:16px 16px 28px;max-width:560px}
.hsc__h2{margin:6px 0 8px;font-size:15px;font-weight:700}
.hsc__list{list-style:none;margin:0 0 14px;padding:0}
.hsc__list li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #eeebe7;font-size:13px}
.hsc__list b{font-weight:500}
.hsc__list span{font-variant-numeric:tabular-nums;color:#3d3b38}
.hsc__p{margin:0 0 12px;font-size:13px;line-height:1.55;color:#3d3b38}
.hsc__state{position:absolute;right:10px;bottom:10px;z-index:4;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;color:#fff;background:#0a0a0a;padding:5px 7px;border-radius:3px;pointer-events:none}
@container (max-width:380px){.hsc__links{display:none}.hsc__cta{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.hsc__head{transition:background-color .2s,color .2s,border-color .2s}}// Header met scrollstanden · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.hsc');if(!w)return;
var sc=w.querySelector('.hsc__scroll'),head=w.querySelector('.hsc__head'),lab=w.querySelector('.hsc__state');
var last=0,acc=0,ticking=false,names={top:'boven',scrolled:'gescrold',hidden:'verborgen'};
function set(s){if(head.getAttribute('data-state')!==s){head.setAttribute('data-state',s);lab.textContent='stand: '+names[s];}}
function upd(){ticking=false;var y=sc.scrollTop,d=y-last;last=y;
if(y<8){acc=0;set('top');return;}
if((d>0&&acc<0)||(d<0&&acc>0))acc=0;acc+=d;
if(acc>24&&y>90)set('hidden');else if(acc<-6)set('scrolled');else if(head.getAttribute('data-state')==='top')set('scrolled');}
sc.addEventListener('scroll',function(){if(!ticking){ticking=true;requestAnimationFrame(upd);}},{passive:true});
w.querySelectorAll('a[href="#"]').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();});});
}
init(document.querySelector('.jouw-container'));Meer uit navigatie & menu's
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 →