Semi-transparent header becomes opaque on scroll

Question

I am attempting to display 5the header of my website at 50% opacity (the header and navigation will overlap a slideshow that's behind it). When the user scrolls down the page, I want the header area to remain locked to the top of the webpage and the opacity be removed. I found an example that I was able to modify. It works in all browsers except IE. Does anyone know of a work-around for IE?

window.addEventListener('scroll', function () {
 document.body.classList[
  window.scrollY > 20 ? 'add': 'remove'
 ]('scrolled');
});

Here is the working example: https://jsfiddle.net/SEH5M/524/

Cheers!

Answer 1

In IE you need to use:

 **window.document.documentElement.scrollTop** instead of **window.scrollY**.

find more here: IE8 alternative to window.scrollY?