title: Explain why scrollTop() always returns 0 here
body: <p>See <a href="http://codepen.io/anon/pen/NGqPNz" rel="noreferrer">http://codepen.io/anon/pen/NGqPNz</a></p>
  
  <p>CSS:</p>
  
  <pre><code>html {
    height: 100%;
    overflow-y: hidden;
  }
  body {
    height: 100%;
    overflow-y: auto;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  $('body').bind("scroll", function () {
      if ($('body').scrollTop()) {
        console.log('triggered!');
      } else {
        console.log($('body').scrollTop());
      }
    });
  </code></pre>
  
  <p>The scroll event is firing on the body element. The scroll bar is on the body element, not on the html or the window element. So why does document.body.scrollTop or $('body').scrollTop() return 0? </p>
  
  <p>Is there any way I can detect the scroll bar position with this or am I stuck if I want to use height: 100%; overflow:hidden on the html element? </p>
  
  <p>Thanks!</p>