Как сделать независимые section с parallax?

Question

[s24344]

Всем привет. Ребята, помогите решить следующую задачу. У меня есть section, и в нем реализован parallax. Но мне необходимо использовать этот section как компонент на различных страницах в разных местах. Соотвественно parallax мне необходимо запускать только в тот момент, когда компонент виден на странице (иначе если их несколько на странице элементы просто съезжают). На данный момент реализован функционал просто запуска эффекта.

<div class=" wrapper">
    <section>
        <div class="large"></div>
        <div class="small"></div>
    </section>
    
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias atque, autem consectetur corporis dicta dolor doloremque dolores ducimus ea inventore laboriosam libero nam officia possimus quos tempore tenetur voluptatum!
        </p>
    </div>

    <section>
        <div class="large"></div>
        <div class="small"></div>
    </section>

    <section>
        <div class="large"></div>
        <div class="small"></div>
    </section>

    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias atque, autem consectetur corporis dicta dolor doloremque dolores ducimus ea inventore laboriosam libero nam officia possimus quos tempore tenetur voluptatum!
        </p>
    </div>
</div>

const large = document.querySelectorAll('.large');
const small = document.querySelectorAll('.small');

window.onscroll = function () {
    let wScroll = window.pageYOffset;

    large.forEach((item) => {
        item.style.top = 0 - (wScroll * .15) + 'px';
    });

    small.forEach((item) => {
        item.style.bottom = 0 - (wScroll * .10) + 'px';
    });
}