How to trigger a JavaScript function only when the user scrolls the page

I need to add positon: fixed to .box only if the user scrolls the page.

The important point here is that the element with the class .box get generated only after the user scrolls the page.

This is what I came up with:

window.addEventListener('scroll', () => {
const myDiv = document.querySelector('.box')
if (myDiv) {
    if (myDiv.style.position !== 'fixed') {
        myDiv.style.position = 'fixed'
    }
}
})

The problem with my code is that the scroll event is now going to fire a million events all the time and kill performance.

What would be the right way to achieve the above without firing scroll event again and again.