Багаторазова функція для додавання класу до елемента, коли користувач прокручує до нього - jquery, function, scroll

Мені потрібно створити функцію, яка викликає класдля додавання до елемента, коли користувач прокручує до нього. Я знаю основну ідею змусити її працювати, але я не можу приступити до роботи, це створити функцію і якось прив'язати її до різних елементів.

Ось код у мене зараз:

$(document).ready(function(){
$.fn.showIcon = function() {
var $elID =  this;
$(window).scroll(function() {
var height = $(window).height() / 1.25;
var offset = elID.offset().top - height;
if ($(window).scrollTop() >= offset) {
$(this).find(".img-responsive").addClass("show");
}
});
}
$("#icon-1").showIcon();
$("#icon-2").showIcon();
$("#icon-3").showIcon();
});

Помилки, які я отримую, говорять мені, що elID не визначений, тому очевидно, що частина "this" на початку функції не розуміє, на який елемент я націлююсь.

Це була остання версія, яку я мав, але я спробував купу різних способів орієнтування на ідентифікатор елементів без удачі.

Отже, що я намагаюся зробити, це зробити так, щоб коли користувач прокручував до # item-1, # item-2 або # item-3, спрацьовувала функція showIcon ().

Будь-яка допомога оцінена, спасибі!

////

Ось оновлення, яке видаляє змінну $ elID,але, здається, частина $ (ця) не хоче націлювати елемент, який я намагаюся отримати. Я не знаю, як отримати елемент, до якого застосовується функція.

$(document).ready(function(){
$.fn.showIcon = function() {

$(window).scroll(function() {
var height = $(window).height() / 1.25;
var offset = $(this).offset().top - height;
if ($(window).scrollTop() >= offset) {
$(this).find(".img-responsive").addClass("show");
}
});
}
$("#icon-1").showIcon();
$("#icon-2").showIcon();
$("#icon-3").showIcon();
});

Відповіді:

У вас проблема з контекстом - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

$(document).ready(function(){
$.fn.showIcon = function() {

// this here is a jquery object
var $element =  this;

$(window).scroll(function() {

// this here is the window object
var $window = $(this);

var windowHeight = $window.height() / 1.25;
var offset = $element.offset().top - windowHeight;
if ($window.scrollTop() >= offset) {
$element.find(".img-responsive").addClass("show");
}
});
}

$("#icon-1").showIcon();
$("#icon-2").showIcon();
$("#icon-3").showIcon();
});

http://jsfiddle.net/P2ptx/