Escribí el siguiente código que agrega un estilo en línea a un elemento una vez que el elemento está fuera de la ventana gráfica.

 const myDiv = document.querySelector('.my-div') const obr = new IntersectionObserver(function(entries) { if (entries[0].intersectionRatio <= 0) { myDiv.style.top = '100px'; } }); obr.observe(myDiv);

El código anterior funciona bien.

Pero ahora necesito agregar el estilo en línea cuando solo 100px de la altura del elemento todavía están en la ventana gráfica. En otras palabras, el estilo no debe agregarse una vez que el elemento está completamente fuera de la ventana gráfica, pero debe agregarse cuando la mayor parte está fuera de la ventana gráfica y 100 px de su altura todavía están en la ventana gráfica.

¿Cómo puedo cambiar el código anterior para lograr eso? Creo que necesito establecer rootMargin en 100 px, pero no estoy seguro de cómo implementarlo en mi código.

Intenté esto:

 const observer = new IntersectionObserver({ rootMargin: '100px' }, entries => {...

Pero luego me sale el siguiente error:

 Uncaught TypeError: Failed to construct 'IntersectionObserver': parameter 1 is not of type 'Function'.