jQuery returning wrong positions of elements in Chrome compared to FF and IE

I'm writing a function to test the scroll bar position against predefined element positions I have stored in an array. There can be any number of this element type on the page, which is why I'm using a for loop to test my scroll bar position.

This code works fine in Firefox, but for some reason jQuery is returning completely different positions for each of my .post-info ($pi) items in Chrome, and is even getting the $(document).height wrong. Is this an issue with my javascript, or with my css? I'll assume my JS as I've tested my position:relative on most elements in my css.

Here is the jQuery I'm running:

(function(){
var i,
st,
length,
arrPos = []

  $wn = $(window);
  $pi = $('.post-info');

  $pi.each(function(){
    arrPos.push($(this).offset().top - 80); // offset -80 so new item sticks quicker.
  });
  height = $(document).height();
  arrPos.push(height); // add bottom position of document to array for last item.

  length = arrPos.length;           
  $wn.scroll(function(){ //Scroll Event Listener
    st = $wn.scrollTop();
    for(i=0; i<=length; i++){
       // i = index, n = next
       n = i+1;
       if(st > 开发者_如何学JAVAarrPos[i] && st < arrPos[n]) _stick(i);
    }
});

Many thanks.

Google Chrome set the height and width after $(document).ready If you have any images, than your page dimensions won't be the right one at this particular moment. Try to preload your images first and when it's completed, than call your function. Hope this help :)