Question

It’s simple, though I’m having trouble. Multiple rows of an element with the same class (.proj) on the page. Each takes 100% width. I want the div.proj that is within 200 pixels of the top of the window to have a class .focused, and otherwise, if it isn’t near the top, to have the class .default. The problem I’m having is singling out the one element.

This is where I am at this point, but it finds all elements .proj instead of just the one that I’m looking for. This is what I have so far, which isn’t really working at all at this point.

$(document).scroll(function(){
    var proj = $('.proj'),
        top = proj.offset().top - $(document).scrollTop();
    if (top < 200 && !proj.is('.default')){
        $(proj).removeClass('focused').addClass('default');
    }
    if (top > 200 && proj.is('.default')){
        $(proj).removeClass('default').addclass('focused');
    }  
});

Answer 1

My example works for every element of class .proj within the 200px range. For singling out a single element, it will work if your elements are of height >= 200px.
If not you should tell us which is the criterion to “single out” a single element (f.ex. the topmost?)
In the example the widths are not 100% but the concept is clear I hope

​$(window).scroll(checkScroll);

function checkScroll()
{
    $(".proj").each(function(i,e) {
            var tp = $(e).offset().top - $(document).scrollTop();
            $(e).toggleClass("focused",tp<200).toggleClass("default",tp>=200);
    });
}​​​​

Check JSFiddle at: http://jsfiddle.net/hnYnS/

Check also http://jsfiddle.net/hnYnS/2/ for a different approach that uses 100% width and checks range between 0 and 200px.

$(window).scroll(checkScroll);  
function checkScroll()
{
    $(".proj").each(function(i,e) {
            var tp = $(e).offset().top - $(document).scrollTop();
            var isOk = tp<200 && tp>=0;
            $(e).toggleClass("focused",isOk).toggleClass("default",!isOk);
        });
}​