title: How to use the scroll event in Javascript (NO Jquery)
body: <p>So HERE is the code. I simple want to change the color of the h1 heading when the scroll is 1000px from top. I would like to use purely javascript for this purpose.Please try and ignore how poorly the code has been written. Any suggestion would be more than welcome. Thank you for you time.</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-html lang-html prettyprint-override"><code>&lt;html&gt; &lt;head&gt; &lt;title&gt; scroll &lt;/title&gt; 
  &lt;!-- CSS !--&gt; 
  &lt;style&gt; .redbox { 
  background-color: red;
  position: absolute;
  top: 10px;
  height: 90px;
  width: 100px;
   } .reveal { 
  position: fixed;
  top:450px;
  transition: width 2s;
  display: block;
  } &lt;/style&gt;
   &lt;/head&gt; 
   &lt;!-- HTML !--&gt; 
   &lt;body&gt; 
   &lt;div class='redbox' id='red'&gt; , &lt;/div&gt; 
   &lt;h1 class='reveal' id='demo'&gt; The comes up on 1000 scroll! &lt;/h1&gt; 
   &lt;h1 style='position: absolute;top: 1900px;'&gt; END &lt;/h1&gt; 
   &lt;!-- JS !--&gt; 
   &lt;script&gt; 
   var top = window.pageYOffset || document.documentElement.scrollTop 
   if (top == 1000) { 
    document.getElementById('demo').style.color = 'red'}
   &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>