Header met scrollstanden New
Header with three states: transparent over the hero at the top, a light background with border and blur after a few pixels, hides when scrolling down and returns on scroll up. Focus inside always reveals it. Runs in its own scroll area; in production bind the same code to window. Small rAF-throttled JS.
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.
How to use it
- Paste the HTML where the navigation & menus 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 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'));More navigation & menus
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 →