if ( ('IntersectionObserver' in window) && (!document.documentElement.classList.contains('dont-sticky')) ) { var body = document.body const sentinel = document.getElementById('sentinel') const stickyEl = document.querySelector('.test') const stickyClass = "sticky" const handler = (entries) => { if (stickyEl) { if (!entries[0].isIntersecting) { body.classList.add(stickyClass); return false; } else { body.classList.remove(stickyClass); return false; } } } const observer = new window.IntersectionObserver(handler) observer.observe(sentinel) }

 body { height: 4000px; background: white; } body.sticky { background: #FFC; } .test { width: 100%; height :100px; top: auto; position: relative; background: #FCF; } body.sticky .test { top: -1px; position: sticky; background: #F6F; }

 <p>text text text</p> <p>text text text</p> <p>text text text</p> <div id="sentinel"></div> <div class="test"></div>

Estoy jugando con IntersectionObserver para agregar una clase al elemento del cuerpo cuando el elemento .test es position:sticky.

Idealmente, me gustaría que StickyClass solo se agregue al elemento del cuerpo cuando el ancho de la pantalla sea mayor a 1000px de ancho, lo que incluye permitir el cambio de tamaño de la ventana del navegador al ver la página.

Sé que puedo escribir consultas de medios css para neutralizar los cambios relacionados cuando el ancho es de 999 px o inferior, pero me interesa saber si es posible y también cuál es la mejor manera de implementar un ancho de ventana mínimo de 1000 px con el script IntersectionObserver. Estoy interesado en ver varias formas de hacerlo.

Una opción que encontré fue window.innerWidth, que funciona bien en la carga de la primera página pero no tiene en cuenta el cambio de tamaño del ancho del navegador.

 window.innerWidth >= 1000 //used like so in the top line of the script if ( ('IntersectionObserver' in window) && (window.innerWidth >= 1000) && (!document.documentElement.classList.contains('dont-sticky')) ) {

Al buscar en la web, puedo ver una nueva opción llamada ResizeObserver y también algo llamado Match. No estoy seguro de si esta es la forma actual de hacerlo y tampoco cómo implementarlos con mi secuencia de comandos IntersectionObserver.

Agradezco enormemente cualquier ayuda.

(confirmando que soy un novato absoluto en javascript)

Muchas gracias.