Одинаковая функция javascript для нескольких элементов, только последние триггеры |особое объяснение

Question

Подробнее:Ситуация = первая собственная функция js все еще не работает,знание английского языка = ужасно,объяснение = следующий код,problem = работает только последний вызов функции "fnElementVisible",цель = понять мои (думающие) ошибки;

Код для объяснения:

$(function() {
  var
  $document = $(document),
  _windowSize = $(window).outerHeight();
  
	$.fn.extend({
		fnElementVisible: function(_value){ //_value = the position in % when the elem should has an opacity=1
			$self = $(this),
			$selfOffset = $self.offset(),
			_selfHeight = $self.outerHeight();

			$document.on('scroll', function(){
				if($selfOffset.top - _windowSize <= $document.scrollTop() && $selfOffset.top + _selfHeight >= $document.scrollTop()){ //check if element is in the visible area of the window
					$self.css({
						background: 'rgba(0,0,0,' + (($document.scrollTop()-($selfOffset.top-_windowSize))/(_windowSize*(_value/100)))+ ')'
					})
				}
			})
		}
	})


  $('#item-1').fnElementVisible(60); //ignored
  $('#item-2').fnElementVisible(70); //ignored
  $('#item-3').fnElementVisible(80); //ignored
  $('#item-4').fnElementVisible(90); //ignored
  $('#item-5').fnElementVisible(100);
})

/*unimportant*/
body{
margin: 0;
}
.spacer{
 height: 430px;
 width: 100%;
 background-color: lightgray;
 }
 
 .item{
  background-color: blue;
  color: #fff;
  
  float: left;
  display: inline-block;
  width: 18%;
  margin-right: 2%;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="spacer">spacer</div>
    <p id="item-1" class="item">elem1</p>
    <p id="item-2" class="item">elem2</p>
    <p id="item-3" class="item">elem3</p>
    <p id="item-4" class="item">elem4</p>
    <p id="item-5" class="item">elem5</p>
<div class="spacer">spacer</div>
</div>

Answer 1

Вы используете необъявленные переменные, когда пишете

$self = $(this),
  $selfOffset = $self.offset(),
  _selfHeight = $self.outerHeight();

Эти переменные являются глобальными и не входят в область действия вашей функции.Это вызывает наблюдаемый эффект.Таким образом, вы просто добавляете объявление let или var к вашим переменным, то есть:

let $self = $(this),
  $selfOffset = $self.offset(),
  _selfHeight = $self.outerHeight();