My scroll handler JavaScript doesn't work in Internet Explorer
<p>I have a script on my site that works in every browser, except Internet Explorer. Can someone explain why this doesn't work? </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var header = document.getElementById('header');
var picturebg = document.getElementsByClassName('picturebg')[0];
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;

window.onscroll = function() {
  "use strict";
  var y = window.scrollY;

  if (y &gt; 7) {
    header.className = 'header-colored';
    arrow.className = 'toTop';
    picturebg.className = 'picturebgns';
  } else {
    header.className = 'header-transparent';
    arrow.className = 'toTop-transparent';
    picturebg.className = 'picturebg';
  }
};</code></pre>
</div>
</div>
</p>

<p>The console doesn't give any errors, it just doesn't work. I have another jQuery script that runs just fine. </p>

<p>I've seen the other question here about the same thing, but it didn't help in any way. </p>