<nav class="navbar navbar-expand-lg bsshrink-bar fixed-top" id="bsshrinkNav">
  <div class="container">
    <a class="navbar-brand fw-bold" href="javascript:void(0)"><span class="bsshrink-dot"></span>Northwind</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bsshrinkCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="bsshrinkCollapse">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Product</a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Docs</a></li>
        <li class="nav-item ms-lg-2"><button class="btn btn-primary btn-sm">Sign up</button></li>
      </ul>
    </div>
  </div>
</nav>

<main class="bsshrink-stage" id="bsshrinkStage">
  <div class="bsshrink-spacer"></div>
  <p class="bsshrink-hint">Scroll down inside this preview — the navbar shrinks its padding and adds a shadow past 40px of scroll, then grows back when you scroll to the top.</p>
  <p class="bsshrink-hint">State: <strong id="bsshrinkState">expanded</strong></p>
  <div class="bsshrink-spacer bsshrink-tall"></div>
</main>

body { margin: 0; }

.bsshrink-bar {
  background: #fff;
  padding-block: 18px;
  border-bottom: 1px solid transparent;
  transition: padding .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bsshrink-bar.bsshrink-scrolled {
  padding-block: 8px;
  box-shadow: 0 2px 14px rgba(15,23,42,.08);
  border-color: #eceef1;
}

.bsshrink-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6366f1; margin-right: 7px; }

.bsshrink-stage { padding-top: 90px; height: 100vh; overflow-y: auto; box-sizing: border-box; background: #f6f7f9; }
.bsshrink-spacer { height: 30vh; }
.bsshrink-tall { height: 120vh; }
.bsshrink-hint { text-align: center; font-size: 13px; color: #6b7280; padding: 0 24px; }
.bsshrink-hint strong { color: #6366f1; }

const nav = document.getElementById('bsshrinkNav');
const stage = document.getElementById('bsshrinkStage');
const stateEl = document.getElementById('bsshrinkState');

stage.addEventListener('scroll', () => {
  const scrolled = stage.scrollTop > 40;
  nav.classList.toggle('bsshrink-scrolled', scrolled);
  stateEl.textContent = scrolled ? 'scrolled (shrunk)' : 'expanded';
});