Добавить класс ТОЛЬКО к элементам в области просмотра

Question

Проблема

Я хотел бы добавить контент только тогда, когда он входит в область просмотра. Решение, которое я нашел здесь, прекрасно работает , пока я применяю код к разделам. Но я хочу исчезнуть в отдельных элементах - здесь представлены p тегами. Что я получаю, так это то, что все теги p исчезают одновременно. Из того, что я понял, код добавляет класс сразу, а не один за другим.

Мой подход пока

1. Протестировал код с разделами. Работает нормально.
2. Переработан код, чтобы исчезнуть в p тегах. Работает нормально, но исчезает во всех элементах одновременно.
3. Проклят на моем компьютере. Много.

Код

  $(document).scroll(function() {
  var pageTop = $(document).scrollTop();
  var pageBottom = pageTop + $(window).height();
  var items = $('.wd-icons');

  for (var i = 0; i < pageBottom; i++) {
    var item = items[i];

    if($(item).position().top < pageBottom) {
      $(item).addClass('wd-visible');
    }
  }
})

Пожалуйста, найдите здесь кодовое поле для демонстрационных целей.

Итак, в чем моя ошибка?