doesn't work at all in IE11

[markentingh]

I'm testing on Windows 10 IE11 browserstack.com and my sticky element just won't stick at all. It works just fine in all other non-IE browsers, even mobile browsers.

Analyzing the page, the sticky element is in fact wrapped in the sticky div wrapper. When I scroll the page down to the point when the element is above the top of the window, nothing happens to the sticky div wrapper. No class change, no style change, nothing.

[garand]

Are there any console errors in IE11?

[markentingh]

There were no errors. For reference, I'm using Magento 2 + jQuery + requireJS. Within the attached screenshot, the sticky element is the grey bar at the top of the web page. My guess is the event listener for window scroll is broken. The source code for the sticky.js around line 257 looks fine, and should register an event listener for scroll. I would recommend using jQuery's on() function instead. I know Magento isn't overriding your event listener since my sticky element is being loaded via an AJAX call after the page loads. I'll modify my local copy of the sticky library to see if jQuery on() works as expected.

[markentingh]

After changing these lines around line 257

if (window.addEventListener) {
  window.addEventListener('scroll', scroller, false);
  window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
  window.attachEvent('onscroll', scroller);
  window.attachEvent('onresize', resizer);
}

to

$(window).on('scroll', scroller);
$(window).on('resize', resizer);

I was able to see the sticky element working in IE11