Witam chcę zrobić żeby przy skrolowaniu wjeżdżały elementy umiem to zrobić statycznie przez co nie jest to kompatybilne z mobile albo desktop. Jest jakiś sposób aby javascript sam wyszukał w , którym momencie window.scrollY jest na poziomie elementu ?
Tak na szybko to zapoznaj się/rzuć okiem na poniższe linki. Potem zacznij sam pisać coś na podstawie tych informacji. A jak napotkasz jakiś problem to daj znać :)
https://stackoverflow.com/questions/6460116/detecting-offset-of-an-element-on-scroll-in-javascript-jquery
https://www.w3schools.com/jsref/event_onscroll.asp
https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2
https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
Super, cieszę się, że pomogłem :)
Jeśli Twój kod/skrypt nie jest to jakiś długi czy skomplikowany kod, to może go tutaj wrzucisz? W ten sposób może uda się pomóc innym ludziom, którzy będą w przyszłości mieli podobny problem i tu zajrzą :)
Sposób w jaki mi się to udało zrobić :
const aboutH1 = document.querySelector('.app-about--h1');
const aboutP = document.querySelector('.app-about--p');
window.addEventListener('scroll', function () {
let isInViewport = function (elem) {
let bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
if (isInViewport(aboutH1) && isInViewport(aboutP)) {
aboutH1.classList.add('app-about--h1__active');
aboutP.classList.add('app-about--p__active');
}
});