CSS | Position sticky not working on IE11

Question

I want to add a specific class to the element when it's sticky position condition matches. I am using Intersection Observation API to check when the element gets it's sticky position. Code is working fine in all Browsers except for IE11. I have added polyfill for Intersection Observation API for IE.

var observer = new IntersectionObserver(function(entries) {
    // no intersection with screen
    if(entries[0].intersectionRatio === 0)
        document.querySelector("#nav-container").classList.add("nav-container-sticky");
    // fully intersects with screen
    else if(entries[0].intersectionRatio === 1)
        document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, { threshold: [0,1] });

This is the fiddle for above scenario.

Thanks

Answer 1

Polyfill: stickyfill https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js can be used here. Also below initialization logic needs to be added:

var element = document.querySelector('#nav-container');
Stickyfill.add(element);