Get elements dynamic position relative to the document while scrolling
<p>I've got a list with 200+ lis. The list is about 400px high, so all lis can't be displayed at the same time. I want to hide (visibility:hidden) the lis that are out of the ul's viewport.</p>

<p>To do this, I <em>think</em> I need to get the top position of each li, relative to the document and compare that to the ul's top position, in order to see whether they are outside the ul or not.
Each li is 70px high. Not sure if this is the right approach, but this is what I have tried so far:</p>

<pre><code>var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName('li'),
    getPos = function(elem) {
      var offsetTop = 0;
      do {
        if (!isNaN(elem.offsetTop)){
          offsetTop += elem.offsetTop;
        }
      } while(elem = elem.offsetParent);
      return offsetTop;
    },
    ulTop = getPos(ul); // outputs 100

ul.addEventListener("scroll", function() {
   console.log(getPos(lis[0])); // outputs 100
   console.log(getPos(lis[1])); // outputs 170
   console.log(getPos(lis[2])); // outputs 240 and so on..
});
</code></pre>

<p>The console log will always output the same. Even when scrolling! Why? I mean, when scrolling, obviously the lis are moving and their positions should therefore change, right? </p>

<p>Obviously this is not the right way to get the "moving" li's top position, which should change when moving it / scrolling the ul. What is the right way to do it? Or do I even have to go this way to hide the lis outside of ul?
<br /> <br /></p>

<p>Oh, and I'd love to, but I can't use any libraries at all here, so only native JS. </p>
