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>

I am playing with IntersectionObserver to add a class to the body element when the .test item is position:sticky.

Ideally I would like the stickyClass to only be added to the body element when the screen width is greater than 1000px wide, including allowing for browser window resizing when viewing the page.

I know I can write css media queries to neutralize the sticky related changes when 999px width or under - but I am interested to know if it's possible and also how best to implement a 1000px minimum window width with the IntersectionObserver script. I am interested to see various ways to do it.

One option I found was window.innerWidth, which works well in the first page load but does not take into account browser width resizing.

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')) ) {

In searching the web I can see a new option called ResizeObserver and also something called Match. I am unsure if these are the current way to do it and also how to implement these with my IntersectionObserver script.

Greatly appreciate any help.

(confirming that I am an absolute rookie at javascript)

Many thanks.