$ (окно) .scrollTop элементы подсветки

Question

Я работаю над проектом, который представляет собой серию сообщений на странице, и когда браузер прокручивается, классы добавляются только к этому сообщению. У меня есть рабочая концепция: http://jsfiddle.net/chdhmphry/V7jPU/

Моя проблема заключается в том, что это выделяет все сообщения вместо одного. Я попытался сделать несколько работ вокруг, но, похоже, не позволяет мне просто добавлять класс к сообщению, которое соответствует параметрам (в пределах 20 пикселей в верхней части окна). Я попробовал $(this), поэтому почему $(".post").ready(function() { является частью кода. Что я делаю неправильно?

The JQuery:

$(window).scroll(function() { 

    var scroll = $(window).scrollTop(); 

    $(".post").ready(function() { 
     post = $(".post", this).offset().top, 
     opacity = post - 20; 

     if (scroll >= opacity) { 
      $(this).addClass("seventy"); 
     } else{ 
      $(this).removeClass("seventy"); 
     } 

    }); 

}); 

Answer 1

Я изменил его на каждую должность, и изменился, как вы получили значение поста. Это было отредактировано, чтобы ответить на ваш вопрос в комментарии: когда нижняя часть сообщения идет ниже scrollTop, тогда он потеряет семьдесят класс.

$(".post").each(function() { 
    var postTop = $(this).offset().top - 20, 
     postBottom = $(this).height() + postTop - 100; // -100 is just to show it work, remove. 

    if (scroll >= postTop && 
     scroll <= postBottom) { 
     $(this).addClass("seventy"); 
    } else{ 
     $(this).removeClass("seventy"); 
     return false; // more efficient, but might not work. 
    } 
});