0

I have the following code to have a div that sticks after it's scrolled. It works in all modern browsers except IE (8, 9 or 10).

Any quick fixes? Much appreciated.

<script>
//turns sidebar into fixed scrolling
var header = document.querySelector('.stickySidebar');
var origOffsetY = header.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                              header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>
mightypixel
  • 141
  • 1
  • 7
  • Probably a matter of doctype or header. See http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly/10305733#10305733 – Denys Séguret May 14 '13 at 13:31
  • 1
    Thank you, but I already have the suggested header. No luck. :( – mightypixel May 14 '13 at 13:33
  • inside of your `onScroll` function add some debugging: `console.log(header, origOffsetY, window.scrollY)` and then you will see which value is not behaving correctly. (Note: in IE press F12 to bring up the dev tools and then click the 'console' tab to view output). – timemachine3030 May 14 '13 at 13:53

1 Answers1

0

IE 8 does not support addEventListener, you must use attachEvent (see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Compatibility)

An example work around (modified from the MDN page):

if (el.addEventListener) {
  el.addEventListener('scroll', onScroll); 
} else if (el.attachEvent)  {
  el.attachEvent('onscroll', onScroll);
}
timemachine3030
  • 362
  • 1
  • 9
  • That doesn't seem to work either. Plus the problem is not limited to IE8, but later versions as well. Thanks for trying to help. – mightypixel May 14 '13 at 13:44