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

Position sticky does not work on IE11, not even with prefix ([caniuse.com: sticky](https://caniuse.com/#search=sticky)). — Alvaro Montoro, Sep 03 '19 at 04:16
yes ie11 not supports it but with the help of stickyfill polyfill , we can use position:sticky — Bhupendra, Sep 04 '19 at 06:13

score 1 · Answer 1 · answered Sep 03 '19 at 09:22

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);

answered Sep 03 '19 at 09:22

Bhupendra

1,196
16
39

CSS | Position sticky not working on IE11

1 Answers1