Footer die onder de pagina vandaan komt New
The footer sits pinned at the bottom (position: sticky; bottom: 0) behind the content, and the page slides off it at the end. Pure CSS, no JS and no new features: works in every current browser. The demo scrolls its own container; on a real site place the sticky footer right after main.
How to use it
- Paste the HTML where the scroll effects should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Footer die onder de pagina vandaan komt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ftr">
<div class="ftr__scroll" tabindex="0" aria-label="Voorbeeldpagina, scroll naar het einde">
<div class="ftr__main">
<p class="ftr__hint">Scroll naar beneden</p>
<p class="ftr__h">Tegelwerk dat dertig jaar meegaat.</p>
<p class="ftr__p">Badkamers, keukens en vloeren in Rotterdam en omgeving. Je krijgt één vast aanspreekpunt en een planning per dag.</p>
<ul class="ftr__jobs"><li><b>Badkamer Kralingen</b><span>12 werkdagen · 2025</span></li><li><b>Keukenwand Hillegersberg</b><span>2 werkdagen · 2025</span></li><li><b>Vloer 64 m² Schiedam</b><span>4 werkdagen · 2026</span></li><li><b>Toilet en hal Capelle</b><span>3 werkdagen · 2026</span></li></ul>
<p class="ftr__p">Nog één stukje, dan zie je de footer onder de pagina vandaan komen.</p>
</div>
<div class="ftr__foot">
<p class="ftr__brand">Bakker Tegelwerken</p>
<div class="ftr__cols"><p><span>Werkplaats</span>Industrieweg 14<br>3044 AS Rotterdam</p><p><span>Contact</span><a href="tel:+31101234567">010 123 4567</a><br><a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></p><p><span>Gegevens</span>KvK 12345678<br>btw NL001234567B01</p></div>
</div>
</div>
</div>
</div>/* Footer die onder de pagina vandaan komt · NedDev · eigen werk. */
.ftr{position:absolute;inset:0;background:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;text-align:left}
.ftr *,.ftr *::before,.ftr *::after{box-sizing:border-box}
.ftr__scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ftr__scroll:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.ftr__main{position:relative;z-index:1;background:#f4f3f1;color:#0a0a0a;padding:16px 18px 22px;border-radius:0 0 8px 8px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.ftr__hint{margin:0 0 10px;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#5c5a57}
.ftr__h{margin:0 0 8px;font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.015em;max-width:18ch}
.ftr__p{margin:0 0 12px;font-size:13px;line-height:1.55;color:#3d3b38;max-width:52ch}
.ftr__jobs{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid #dedad4}
.ftr__jobs li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #dedad4;font-size:13px}
.ftr__jobs b{font-weight:600}
.ftr__jobs span{font:500 11px/1.4 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57;white-space:nowrap}
.ftr__foot{position:sticky;bottom:0;z-index:0;background:#0a0a0a;color:#fff;padding:18px 18px 16px}
.ftr__brand{margin:0 0 12px;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1}
.ftr__brand::after{content:'.';color:#F5480F}
.ftr__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ftr__cols p{margin:0;font-size:12px;line-height:1.5;color:#d9d6d1}
.ftr__cols span{display:block;margin-bottom:3px;font:500 9.5px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#9a968f}
.ftr__cols a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .15s}
.ftr__cols a:hover{border-bottom-color:#F5480F}
.ftr__cols a:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (max-width:420px){.ftr__cols{grid-template-columns:1fr 1fr}.ftr__cols p:last-child{display:none}.ftr__foot{padding:14px 14px 12px}.ftr__brand{font-size:17px;margin-bottom:8px}}More scroll effects
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 →