title: AMP Page Reading Progress For Content Only
body: <p>I found this example for reading progress on AMP page on <a href="https://codepen.io/aghassemi/pen/MxQxZR" rel="nofollow noreferrer">this pen</a></p>
  
  <h3>Code</h3>
  
  <pre><code>&lt;amp-position-observer
    intersection-ratios="0"
    viewport-margins=100vh
    on="scroll:pogressAnimation.seekTo(percent=event.percent)"
    layout="nodisplay"
  &gt;&lt;/amp-position-observer&gt;
  </code></pre>
  
  <p>It's using <code>100vh</code> to calculate is incorrect, because in real website, we have header, sidebar, footer and some other elements, it will make the height of website longer.</p>
  
  <p>What I want it only calculate height content of <code>&lt;article&gt;</code> tag, or maybe <code>id</code> of element, then use <code>&lt;progress&gt;</code> element, or <code>&lt;amp-position-observer&gt;</code> to trigger.</p>
  
  <p>Thanks for your help!</p>