Question

I’m looking for a very fast solution to a div scrolling problem.

I have a set of divs, like forum posts, that are laid out one on top of the other. As the page scrolls down or up, I’d like to know when one of those divs hit’s an arbitrary point on the page.

One way I tried was adding an onScroll event to each item, but as the number of items grow the page really starts to lag.

Anyone know a more efficient way to do this? Thanks /w

Answer 1

Well, I’m new to all this, so may be someone should correct me 🙂

I propose to

• cache posts position
• caсhe current
• use binary search

Demo: http://jsfiddle.net/zYe8M/

<div class="post"></div>
<div class="post"></div>
<div class="post"></div>

…

var posts = $(".post"), // our elements
    postsPos = [], // caсhe for positions
    postsCur = -1, // cache for current
    targetOffset = 50; // position from top of window where you want to make post current

// filling postsPos with positions
posts.each(function(){
    postsPos.push($(this).offset().top);
});

// on window scroll
$(window).bind("scroll", function(){
  // get target post number
  var targ = postsPos.binarySearch($(window).scrollTop() + targetOffset);
  // only if we scrolled to another post
  if (targ != postsCur) {
    // set new cur
    postsCur = targ;
    // moving cur class
    posts.removeClass("cur").eq(targ).addClass("cur");
  }
});

// binary search with little tuning on return to get nearest from bottom
Array.prototype.binarySearch = function(find) {
  var low = 0, high = this.length - 1,
      i, comparison;
  while (low <= high) {
    i = Math.floor((low + high) / 2);
    if (this[i] < find) { low = i + 1; continue; };
    if (this[i] > find) { high = i - 1; continue; };
    return i;
  }
  return this[i] > find ? i-1 : i;
};