Такое можно сделать при помощи custom properties и слушателя скролла.
document.addEventListener('scroll', function (e) {
if (window.pageYOffset > 150) {
document.documentElement.style.setProperty('--opacity', 0.5);
} else {
document.documentElement.style.setProperty('--opacity', 1);
}
});
:root {
--opacity: 1;
}
body {
margin: 0;
height: 300vh;
}
header {
background-color: rgba(0, 0, 0, var(--opacity));
height: 50px;
padding: 1em;
width: 100vw;
position: fixed;
text-align: center;
transition: background-color .3s;
}
header:hover {
--opacity: 1;
}
<header>Text</header>