Anything below 1.0 threshold in intersecting observer options is not triggering at all

    jQuery( document ).ready(function() {

    let options = {
        rootMargin: '0px',
        threshold: 0.5
    }

    var callback = function(entries, observer) {
        entries.forEach(entry => {
                entry.target.classList.add('active');
            } else {
                entry.target.classList.remove('active');
            }
        })
    }

    let observer = new IntersectionObserver(callback, options);
    let target = '.wp-block-group[id]';

    document.querySelectorAll(target).forEach((i) => {
        observer.observe(i);
    });
});

When I keep the threshold at 1.0, it’s responding as expected, but when I change to 0.5 it stops triggering the intersection event. Any insight on why I would be getting this response? I’m using chrome browser. I do need to change this because some sections on the page are much taller than others, so by keeping it at 1.0 those taller sections aren’t triggering. Thank you for the help!