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
0
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>