Why this works

Using a scrollable container and a sticky navbar inside it, we shrink the navbar based on the container's scroll, not the whole page. This keeps the demo self-contained and prevents affecting your site's global navigation.

Source Code

<div class="demo-container" id="demoContainer">
  <nav id="demoNavbar" class="demo-navbar">
    <div class="demo-wrapper">
      <a href="#" class="demo-brand">WdrFree</a>
    </div>
  </nav>

  <div class="demo-content">
    <div style="height: 1200px; text-align: center; padding-top: 8rem;">Scroll inside here ↓</div>
  </div>
</div>

<style>
.demo-container {
  position: relative;
  height: 500px;
  overflow-y: scroll;
  background: #e9ecef;
  border: 2px solid #dee2e6;
  border-radius: 8px;
}
.demo-navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #0d6efd;
  padding: 1rem 2rem;
  transition: padding 0.3s ease;
  z-index: 10;
}
.demo-navbar.shrink {
  padding: 0.5rem 2rem;
}
.demo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-brand {
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: bold;
}
.demo-content {
  padding: 2rem;
}
</style>

<script>
const demoContainer = document.getElementById('demoContainer');
const demoNavbar = document.getElementById('demoNavbar');

demoContainer.addEventListener('scroll', function() {
  if (demoContainer.scrollTop > 50) {
    demoNavbar.classList.add('shrink');
  } else {
    demoNavbar.classList.remove('shrink');
  }
});
<\\/script>