title: Listening to JS .scroll() efficiently
body: <p>I have a scrollable element with many children and a select tag with corresponding options.</p>
  
  <p>I want to change the select's value based on the elements <code>.scrollTop()</code></p>
  
  <p>How to do it efficiently? I thought about storing the children's <code>.offset().top</code> in an array and looping throught it. However, the browser doesn't handle it. I might try creating a <code>.setTimeout()</code> flag, but that doesn't seem clean.</p>
  
  <pre><code>    r = $('ul')
      offsets = []
      r.find('li').each((index) -&gt;
        offsets[index] = $(this).offset().top
      )
      r.bind('scroll', -&gt;
        // while loop checking .scrollTop() &gt; offsets[n] is slow
        // maybe spams to many .scroll events?
      )
  </code></pre>