Get position of each element

Question

 $(function(){ var $animatedEls = $(".marked"); $(window).scroll(function(e) { var offset = 0; $.each($animatedEls, function(i, item) { offset = $(item).offset().top; console.log($(item).offset()); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> <div>...</div> <h2 class="marked">This sucks.</h2> 

I am trying to get the position of some matched elements when scrolling. The output is however the same number for each element.

Output:

Object {top: 2480, left: 0}
Object {top: 2480, left: 0}
Object {top: 2480, left: 0}

Why is the offset the same for each element? The values are also changing when I scroll.

EDIT: Okay. The snippet works on here, but not on my site. Highly annoying.

Answer 1

The problem is in the use of .each.

It should be used like this:

var $animatedEls = $('.marked');

        $(window).scroll(function(e) {

            $.each($animatedEls, function(index, item) {
                console.log($(item).offset());
            }

        }