0

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!

Matt Smerb
  • 1
  • Which version of IE are we talking about? It might be an issue with supporting the CSS3 opacity feature - check this article for cross-browser opacity: https://css-tricks.com/snippets/css/cross-browser-opacity/ – Aziz Aug 25 '15 at 21:20
  • Also I'd suggest you put the transition rule inside the #header for a smoother effect – Aziz Aug 25 '15 at 21:23
  • Internet Explorer 11 – Matt Smerb Aug 25 '15 at 22:46

1 Answers1

0

In IE you need to use:

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

find more here: IE8 alternative to window.scrollY?

Community
  • 1
  • 1
Saar
  • 2,276
  • 1
  • 16
  • 14
  • Thank you for the quick response! I swapped out the code but unfortunately it's still not working in IE. The semi-transparent background does not turn solid black when the user scrolls up and down. I am trying this on IE 11. – Matt Smerb Aug 25 '15 at 22:07
  • Indeed it is working in codepen (but not in jsfiddle)!! I am going to move forward with it. Thank you again Saar! – Matt Smerb Aug 26 '15 at 06:00