title: Can I listen for scrolling within a div with .scrollTop (no jQuery)
body: <p><strong>EDIT: SOLVED</strong></p>
  
  <p>Here's the working code (checking for <code>perspective</code> support, and if it exists creating CSS parallax and listening for scrolling within div for the effect, otherwise it defaults to listening for <code>window.scroll</code>):</p>
  
  <pre><code>html,body {height: 100%; width: 100%;}
  #nav {
      display:block;
      background:#d9ffff;
      position:fixed;
      z-index:10000;  
      width:100%;
      height:100px;
      padding-top:0px;
      transition: all 0.6s;
  }
  .prllx_group {
      position: relative;
      height: 100vh;
  }
  div {height:400px}
  #one {background:#d9d9ff}
  #two {background:#d9ffd9}
  #three {background:#ffd9d9} 
  
  @supports (perspective: 1px) {  
  
      body, html {
          overflow: hidden;
          height: 100%;
          width: 100%;
      }
      body {
          -webkit-transform: translateZ(0px);
          transform: translateZ(0px);
      }
  
      .prllx {
          position:relative;
          height: 45em;
          height: 100vh;
          overflow-x: hidden;
          overflow-y: auto;
          -webkit-perspective: 300px;
          perspective: 300px;
          perspective-origin-x: 100%;
      }
      .prllx_group {
          position:relative;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
      }
   }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="nav"&gt;
      &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="#one"&gt;ONE&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#two"&gt;TWO&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#three"&gt;THREE&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div id="parallax" class="prllx"&gt;
  
      &lt;div&gt;&lt;/div&gt;
      &lt;div id="one" class="prllx_group"&gt;...&lt;/div&gt;
      &lt;div id="two" class="prllx_group"&gt;...&lt;/div&gt;
      &lt;div id="three" class="prllx_group"&gt;...&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    var container = window;
      var scrolledDiv = document.body;
      var hello = 1;
  
      if( typeof CSS !== "undefined" &amp;&amp;
      typeof CSS.supports !== "undefined" &amp;&amp;
      !CSS.supports("-webkit-overflow-scrolling", "touch") &amp;&amp;
      CSS.supports("perspective", "1px")) {
          var container = document.getElementById('parallax');
          var scrolledDiv = document.getElementById('parallax');
      };
  
      container.onscroll = function isTheTop() {
      var headerElement = document.getElementById('nav');
      var headerHeight = headerElement.offsetHeight;
      if (scrolledDiv.scrollTop &gt; 80 || document.documentElement.scrollTop &gt; headerHeight) {
          headerElement.style.background='rgba(29,29,29,0.9)'; 
          headerElement.style.paddingTop='0';
          headerElement.style.boxShadow='0 0 0.6em #1d1d1d';
  
      } else {
          headerElement.style.background='rgba(0,0,0,0)'; 
          headerElement.style.paddingTop='20px';
          headerElement.style.boxShadow='0';
      }
  };
  </code></pre>
  
  <p>I also made sure the script is running after the HTML code, at the end of the page or deferred, then it works.</p>
  
  <p>Thanks! </p>
  
  <hr>
  
  <h2>original question:</h2>
  
  <p>I can't get the following script to listen for scrolling within a div, rather than window scrolling. If I try to use a CSS parallax effect (i.e. all content is inside a <code>div</code>, which stays still relative to <code>body</code>, and all content scrolls within the <code>div</code>.)</p>
  
  <p>Here's my CSS</p>
  
  <p><code>SAME CSS AS ABOVE</code></p>
  
  <p>Here's my HTML:</p>
  
  <p><code>SAME HTML AS ABOVE</code></p>
  
  <p>And here's the JS (which works if I override the <code>@supports</code> –with a <code>!</code>, for example– so it defaults to an unenhanced content):</p>
  
  <pre><code>function isTheTop() {
      var headerElement = document.getElementById('nav');
      var headerHeight = headerElement.offsetHeight;
      if (document.body.scrollTop &gt; 80 || document.documentElement.scrollTop &gt; headerHeight) {
          headerElement.style.background='rgba(29,29,29,0.9)'; 
          headerElement.style.paddingTop='0';
          headerElement.style.boxShadow='0 0 0.6em #1d1d1d';
  
      } else {
          headerElement.style.background='rgba(0,0,0,0)'; 
          headerElement.style.paddingTop='20px';
          headerElement.style.boxShadow='0';
      }
  };
  window.onscroll = function() {isTheTop()};
  </code></pre>
  
  <p>I tried listening for <code>parallax.onscroll</code> (instead of <code>window.onscroll</code>) but the effect does not work. </p>