<div class="header">
<nav class="navbar">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
</ul>
</nav>
</div>
.navbar {
display: flex;
justify-content: space-between;
}
function initWebsite() {
const header = document.querySelector('.header');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
  header.classList.add('scrolled');
} else {
  header.classList.remove('scrolled');
}
});
}
initWebsite();