Sticky mobiele belbalk Nieuw

<!-- Sticky mobiele belbalk · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xmc">
  <div class="xmc__inner">
    <div class="xmc__text">
      <span class="xmc__eyebrow">Patroon · mobiele conversie</span>
      <h2 class="xmc__h">Op de telefoon scrolt niemand terug naar het nummer bovenaan.</h2>
      <p class="xmc__lead">Daarom verschijnt de belbalk zodra de bezoeker de hero voorbij is. Drie knoppen, duimbereik, altijd zichtbaar. Scroll in het toestel om het te zien.</p>
      <ul class="xmc__list"><li><b>Bellen</b> opent direct de telefoon-app</li><li><b>WhatsApp</b> met een voorgevuld bericht</li><li><b>Offerte</b> springt naar het korte formulier</li></ul>
    </div>
    <div class="xmc__device">
      <div class="xmc__phone">
        <div class="xmc__notch" aria-hidden="true"></div>
        <div class="xmc__screen" tabindex="0" aria-label="Voorbeeldpagina, scrollbaar">
          <div class="xmc__nav"><b>Glasservice Westland</b><span class="xmc__burger" aria-hidden="true"></span></div>
          <div class="xmc__hero">
            <span class="xmc__pill">24/7 spoedservice</span>
            <h3>Ruit kapot? Vaak dezelfde dag vervangen.</h3>
            <p>Naaldwijk, Monster, Wateringen en De Lier. Noodbeglazing binnen 2 uur.</p>
            <a class="xmc__heroBtn" href="#">Bel 0174 123 456</a>
          </div>
          <div class="xmc__sec"><h4>Wat we doen</h4>
            <div class="xmc__svc"><i></i><span><b>Isolatieglas HR++</b>vanaf € 89 per m²</span></div>
            <div class="xmc__svc"><i></i><span><b>Inbraakschade</b>zelfde dag dicht</span></div>
            <div class="xmc__svc"><i></i><span><b>Kassen en serres</b>tuinbouwglas op maat</span></div>
            <div class="xmc__svc"><i></i><span><b>Spiegels en douchewanden</b>inmeten bij u thuis</span></div>
          </div>
          <div class="xmc__sec xmc__sec--alt"><h4>Beoordeling 9,3</h4><p>"Om 22:00 gebeld, om 23:15 zat er een noodplaat in. Volgende ochtend nieuw glas." <small>Ilse, Monster</small></p></div>
          <div class="xmc__sec"><h4>Offerte binnen 1 werkdag</h4><div class="xmc__fake"></div><div class="xmc__fake"></div><div class="xmc__fake xmc__fake--btn"></div></div>
          <div class="xmc__foot">Glasservice Westland · Naaldwijk</div>
        </div>
        <div class="xmc__bar" aria-hidden="true">
          <a href="#" class="xmc__b" tabindex="-1"><svg viewBox="0 0 24 24"><path d="M6.6 3.5l2.6 3.2-1.6 2.6a12 12 0 0 0 7.1 7.1l2.6-1.6 3.2 2.6-1.2 3c-8.5.4-15.6-6.7-15.2-15.2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>Bellen</a>
          <a href="#" class="xmc__b" tabindex="-1"><svg viewBox="0 0 24 24"><path d="M4 20l1.3-4A8 8 0 1 1 8.4 19z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 9.5c.3 2.4 2.4 4.6 5 5l1-1.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>WhatsApp</a>
          <a href="#" class="xmc__b xmc__b--main" tabindex="-1">Offerte</a>
        </div>
        <span class="xmc__hint" aria-hidden="true">scroll</span>
      </div>
    </div>
  </div>
</div>
</div>

/* Sticky mobiele belbalk · NedDev · eigen werk. */
.xmc{background:#eef2f5;color:#0b1f33;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xmc *{box-sizing:border-box}
.xmc__inner{max-width:1040px;margin:0 auto;padding:30px 32px;display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:center}
.xmc__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#14897e;margin-bottom:14px}
.xmc__h{font-size:clamp(24px,3vw,36px);line-height:1.08;letter-spacing:-.02em;font-weight:700;margin:0 0 14px;max-width:20ch}
.xmc__lead{font-size:15.5px;line-height:1.55;color:#46596b;margin:0 0 18px;max-width:44ch}
.xmc__list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:#46596b}
.xmc__list b{color:#0b1f33;display:inline-block;min-width:80px}
.xmc__device{display:flex;justify-content:center}
.xmc__phone{position:relative;width:280px;height:530px;border-radius:36px;background:#0b1f33;padding:10px;box-shadow:0 24px 50px -24px rgba(11,31,51,.6)}
.xmc__notch{position:absolute;top:16px;left:50%;width:84px;height:20px;margin-left:-42px;border-radius:12px;background:#0b1f33;z-index:4}
.xmc__screen{position:relative;height:100%;border-radius:27px;background:#fff;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;outline:none}
.xmc__screen::-webkit-scrollbar{display:none}
.xmc__nav{display:flex;justify-content:space-between;align-items:center;padding:42px 16px 10px;font-size:13px}
.xmc__burger{width:18px;height:2px;background:#0b1f33;box-shadow:0 -5px 0 #0b1f33,0 5px 0 #0b1f33}
.xmc__hero{margin:0 10px;padding:20px 16px;border-radius:14px;background:linear-gradient(150deg,#0b1f33 0%,#14405f 100%);color:#fff;position:relative;overflow:hidden}
.xmc__hero::after{content:'';position:absolute;right:-30px;top:-20px;width:120px;height:160px;background:linear-gradient(115deg,rgba(255,255,255,.18) 0 18%,transparent 18% 30%,rgba(255,255,255,.1) 30% 38%,transparent 38%);transform:rotate(8deg)}
.xmc__pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#2ec4b6;color:#0b1f33;padding:3px 7px;border-radius:3px}
.xmc__hero h3{font-size:21px;line-height:1.12;margin:10px 0 8px;font-weight:700}
.xmc__hero p{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.75);margin:0 0 14px}
.xmc__heroBtn{display:block;text-align:center;background:#fff;color:#0b1f33;text-decoration:none;font-weight:700;font-size:13px;padding:10px;border-radius:8px}
.xmc__sec{padding:18px 16px 4px}
.xmc__sec h4{font-size:14px;margin:0 0 10px}
.xmc__svc{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #edf1f4;font-size:12px;color:#5b6d7e}
.xmc__svc i{flex:none;width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#d6f3f0,#a5e3dd)}
.xmc__svc b{display:block;color:#0b1f33;font-size:13px}
.xmc__sec--alt{margin:14px 10px 0;background:#f2f6f8;border-radius:12px;padding:14px}
.xmc__sec--alt p{margin:0;font-size:12.5px;line-height:1.45}
.xmc__sec--alt small{display:block;color:#6a7c8c;margin-top:5px}
.xmc__fake{height:34px;border:1.5px solid #dfe6ec;border-radius:8px;margin-bottom:8px}
.xmc__fake--btn{background:#0b1f33;border:0}
.xmc__foot{padding:20px 16px 90px;font-size:11px;color:#8b9aa8}
.xmc__bar{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;border-radius:0 0 27px 27px;background:#fff;border-top:1px solid #e1e8ee;padding:8px 8px 14px;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;transform:translateY(110%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .3s;pointer-events:none;overflow:hidden}
.xmc__bar.is-on{transform:none;opacity:1;pointer-events:auto}
.xmc__b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:#0b1f33;text-decoration:none;border-radius:10px;padding:6px 2px;background:#f2f6f8}
.xmc__b svg{width:18px;height:18px}
.xmc__b--main{background:#2ec4b6;font-size:13px;font-weight:700}
.xmc__hint{position:absolute;right:-46px;top:50%;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:#14897e;writing-mode:vertical-rl;transition:opacity .3s;animation:xmc-hint 1.6s ease-in-out infinite}
.xmc__hint.is-gone{opacity:0}
@keyframes xmc-hint{0%,100%{transform:translateY(-6px)}50%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.xmc__bar{transition:opacity .2s}.xmc__hint{animation:none}}
@media(max-width:820px){.xmc__inner{grid-template-columns:minmax(0,1fr);padding:28px 16px;gap:24px}.xmc__hint{right:auto;left:50%;top:auto;bottom:-22px;writing-mode:horizontal-tb;margin-left:-18px}.xmc__device{padding-bottom:22px}}

// Sticky mobiele belbalk · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xmc');if(!w)return;
var sc=w.querySelector('.xmc__screen'),bar=w.querySelector('.xmc__bar'),hint=w.querySelector('.xmc__hint'),links=bar.querySelectorAll('a');
function upd(){var on=sc.scrollTop>140;if(on!==bar.classList.contains('is-on')){bar.classList.toggle('is-on',on);bar.setAttribute('aria-hidden',!on);links.forEach(function(a){a.tabIndex=on?0:-1;});}if(sc.scrollTop>10)hint.classList.add('is-gone');}
sc.addEventListener('scroll',upd,{passive:true});upd();
}
init(document.querySelector('.jouw-container'));