How to make jquery scrolling effect work on multiple element/classes?

I'm trying to make a very light script for multiple classes class"demo" that can work on my onScrollDown responsive animation.

I don't really understand about writing arrays. but, I believe that if I use document.getElementsByClassName("demo")[i] , i < 0 and some function(i) I can implement it for individual classes. Because I use getBoundingClientRect() instead of fixed value.

So, how can I write it correctly using i as arrays?

Thank you..

Here is my working script :

<script>
var e = document.getElementById("demo");
var rect = e.getBoundingClientRect();
var x = rect.top;
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > x-300) {
        $('#demo').addClass('animate');
    } else {
        $('#demo').removeClass('animate');
    }
});
</script>

*work only for a single element.

Here is what I'm trying to do, that not working yet

<script>
var e = document.getElementsClassName("test")[i];
var rect = e.getBoundingClientRect();
var x = rect.top;
var i;
for (i = 0; i < e.length; i++) {
  $(window).bind('scroll', function (i) {
      if ($(window).scrollTop() > x-300) {
          $e.addClass('animate');
      } else {
          $e.removeClass('animate');
      }
  });
}
</script>

CSS :

<style>
.test {
    background:#345;
    color:#FFF;
    height:2em;
    padding:.5em;
    top:50px;
    margin-top: 100px;
    width:100%;
}
.animate {
    width: 60px;
}
</style>

HTML

<div style="color: red; margin-bottom: 400px;">(Top!)</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div style="color: red; margin-top: 400px;">(Bottom!)</div>