Jeżeli chodzi o czysty CSS i JS to nie jest to skomplikowane - nasłuchujesz event scroll i odpowiednio usuwasz lub dodajesz klasy css.
W poniższym przykładzie body ma wysokość 1,5 okien przeglądarki, na środku jest wyśrodkowany div (dodana jest też właściwość transition dzięki czemu animacja zmiany będzie płynna). W JS nasłuchujesz na scroll i odpinasz klasę odpowiedzialną za mały rozmiar i kolor czerwony a w zamian podpinasz klasę która nadaje kolor niebieski i większy rozmiar.
Scroll możesz kontrolować np dzięki scrollY
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Scroll</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
* {
margin: 0;
}
body {
height: 150vh;
}
div {
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
transition: 1s linear;
}
.small {
background-color: red;
height: 50px;
width: 50px;
}
.big {
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id='test-div' class='small'></div>
<script>
const div = document.querySelector('#test-div');
window.addEventListener('scroll', () => {
let position = window.scrollY;
if(position >= 80){
div.classList.remove('small');
div.classList.add('big');
} else {
div.classList.remove('big');
div.classList.add('small');
}
})
</script>
</body>
</html>