Sticky book bar

The phone's bottom bar (Call + "From $40 · Book a visit"): there from the first screen, slides away while reading down, back on any scroll up, a pause, the page end or keyboard focus; steps aside for the form and the keyboard.

On a phone: the bar is there from the first screen (it is the hero CTA there), slides away as you read down, and comes back on any scroll up, when you pause, and at the end. It steps aside while the booking form is on screen. Over 760 px wide it is hidden (add .wbl-bb--all to keep it): in this demo it is kept on so you can see it.

Colour that lasts past week six

Every colour starts with a strand test and a price you hear before we mix anything. Reds and coppers get a bond treatment on the house.

Prices

Women's cut + blow-dry$65
Men's cut$40
Gloss / toner$55
Root touch-up$85
Balayagefrom $220

Two chairs, no rush

Maria opened the studio on Sunset in 2012. There are two chairs, one appointment per stylist at a time, and nobody watching the clock.

2214 W Sunset Blvd

Echo Park, two doors from the laundromat. Street parking on Lemoyne. Tue–Sun, from 9 am on Saturdays.

Questions

Do you take walk-ins? Yes, Tuesday to Sunday, until 30 minutes before close. Do you do vivid colour? Yes: book a free 15-minute consult first.

Book a visit

The bar steps aside while this form is on screen.

Footer

2214 W Sunset Blvd · (323) 555-0142

How to use it

Size

1.9 KB gzipped own code (JS 1.2 KB + CSS 0.7 KB; 4.1 KB raw)

Dependency

none (vanilla + native APIs)

Tag

Flow

Best for

Every BOOK and CALL business on phones

What it does

Direction-aware with hysteresis: it hides after 56 px of travel down and returns after 12 px up, so tiny jitters don't flicker it. It also returns after 1.6 s without scrolling, near the top and bottom of the page, and whenever focus enters it. While a data-hide target (the booking form, a Service picker with its own bar) is at least 15% on screen, or the on-screen keyboard is open (visualViewport), it stays away. Hidden = transform + visibility + inert, so it can't be tabbed into while away. Body gets bottom padding so the footer is never covered.

When to use

Every phone preview (skill: on phones the sticky bar is the hero CTA; the in-flow hero buttons are hidden under 560 px).

Use one label everywhere ("Book a visit"), the same as the hero and sections.

Don't

Two sticky bottom bars (batch 1 call-bar, batch 2 header handoff): pick one.

Covering the form or the cookie banner (add them to data-hide).

Show it on desktop unless the page has no header CTA.

Reduced motion, no JS, accessibility

Reduced motion: appears/disappears without sliding.

No JS: a plain sticky bar that stays put.

<nav aria-label>, Call link has the number as its name, 52 px targets, safe-area padding for the iPhone home bar; inert while hidden.

Notes

Tune with data-down / data-up (px) and data-idle (ms, 0 = never auto-return).

Copy-ready snippet

<!-- Sticky book bar (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/book-bar/module.css">
<script src="/wbl/book-bar/module.js" defer></script>

<!-- markup: -->
<nav class="wbl-bb" data-wbl="book-bar" data-hide="#book-form, .wbl-sp" aria-label="Quick actions">
  <a class="wbl-bb-call" href="tel:+13235550142" aria-label="Call (323) 555-0142">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2"/></svg>
  </a>
  <a class="wbl-bb-book" href="#book"><small>From $40</small>Book a visit</a>
</nav>