title: Calculate what percentage of a specific element has been scrolled into view
body: <p>Say you have a web page with multiple large panels, you can easily calculate what percentage of the entire page the user has scrolled to with the following code.</p>
  
  <pre><code>$(window).scroll(function(){
  
      var windowTop = $(this).scrollTop()
      var bodyHeight = $('body').height()
  
      var percentage = (windowTop/bodyHeight) * 100
      console.log(percentage)
  
  });
  </code></pre>
  
  <p>However what I want to do is calculate, for one individual panel, what percentage <em>of that panel</em> has been scrolled into the viewport. So this will be 0% consistently until you get to the panel, and once you've scrolled to the bottom of that panel it'll be 100%.</p>
  
  <p>I feel like this might be a simple equation but I just can't wrap my brain around what I need to do to achieve this.</p>