Wielkość obrazka zależna od scrollowania

0

Witam,
Kompletnie nie umiem sobie z tym poradzić i byłoby bardzo miło i wspaniale, gdyby ktoś podesłałby mi jakieś rozwiązanie.
Potrzebuję, aby grafika (np. 300x200px, nie na cały ekran) powiększała się do swoich naturalnych rozmarów przy scrollowaniu strony (i aby działało to tylko będąc w na wysokości danego diva, wiecie, tak jak w różnych pluginach parallax, że można przypiąć do konkretnej sekcji). A po sscrollowaniu w górę z powrotem się zmniejszała do jakiegoś rozmiaru. Byłby ktoś tak miły? :D

1 
body {
	margin: 0;
	padding: 0;
}
#hello, #fixed {
	width: 100px;
	height: 100px;
	background: olive;
}

#hello {
	background: olive;
}

#fixed {
	position: fixed;
	background: orange;
	left: 20%;
}

<body style="background: darkolivegreen;">

<div id="fixed"></div>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />

<div style="width: calc(100%-2px); border: 1px dashed yellow;">	
	<div id="hello"></div>
</div>

<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />

var hello = document.getElementById('hello');

const y =  (hello.getBoundingClientRect().top) + window.scrollY;
const y2 = (hello.getBoundingClientRect().bottom) + window.scrollY;

document.addEventListener('scroll', function(e) {
	
	if(window.pageYOffset >= y && window.pageYOffset <= y2) {
		document.getElementById('fixed').style.backgroundColor = 'yellow';
	} else {
		document.getElementById('fixed').style.backgroundColor = 'orange';
	}

}, false);

</body>

1 użytkowników online, w tym zalogowanych: 0, gości: 1