title: Most efficient way to detect current element in scroll navigation
body: <p>Im not sure how to find what I need (name it) so I count on you to explain it for me.</p>
  
  <p>I need to create javascript content navigation based on "post" or "comment" system. First of all I want to emphasize that content is not plain text but It contain HTML, images and other objects that can resize during usage.</p>
  
  <p><strong>How does it look?</strong>
  One container for content divided to sections and one for dedicated navigation scroll - this scroll is snapped relatively to sections.</p>
  
  <p><a href="https://i.stack.imgur.com/YKLVE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YKLVE.png" alt="enter image description here"></a></p>
  
  <p>Whole system is very simillar to discourse posts navigation -
  <a href="https://try.discourse.org/" rel="nofollow noreferrer">check discourse here</a></p>
  
  <ul>
  <li>Most important thing for me is to keep synchronization for scroll and content.</li>
  <li>If you click 3th post in scroll, content should scroll to this post - this is easy.</li>
  <li>If you scroll by mouse content is scrolled + dedicated navigation is automatically synchronised - this is my problem I think.</li>
  </ul>
  
  <p><strong>What is the best* way to check which one section is my current section.
  Should I find visible element? bounding rectangle? calculate it based on heights of all sections?</strong></p>
  
  <p>PS If you have any library working in similar way you can post it as addition - it can be helpful for me.</p>
  
  <p><strong>//edit</strong></p>
  
  <p><strong>*best</strong> - simple, not too slow if I get more elements (100-1000), takes into consideration dynamic content (resize) and also supported by all modern browsers. Probably there is more than 3 methods but if you post more alternatives, Me or someone else can pick suitable solution.</p>