JSFiddle - React, Tailwind, and code Playground
by hibinyru
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="active" id="id951323">
вапара
рраенроен<br><br><br>
</div>
<div class="active" id="id9513rt">
арпарап
ра
реногр<br><br><br><br>
негол
</div>
<div class="active" id="id9">
е
екенгоенгон
гншлнгшщ<br><br><br><br>
еншлнгш<br><br><br>
yuoluiol<br>
uioluiou<br><br>
</div>
<div class="active" id="id944">
кегенгше
шнгшщ
uyiouiop<br><br>
iuopiop;[<br><br>
кенрк<br><br>
yhr<br><br>
yhtr
y
]
</div>
JavaScript
let of = $(window).height() / 2, // Отступ, в данным случае считает от центра экрана
el = $(".active"), // Какие блоки учитывать
cur = false; // Тут храним блок в скролле, чтобы срабатывало один раз
$(window).on("scroll", function() // при скролле..
{
let sY = $(this).scrollTop(); // получаем текущею позицию скролла
el.each(function() // проходим по ВСЕМ блокам которые нужно учитывать
{
let el = $(this); // запоминаем его, чтобы не обращаться к нему
// Тут проверяем, входил ли позиция скролла - отступ в границу блока.
if(el.position().top - of <= sY && el.position().top + el.outerHeight() - of > sY) // если да, то
{
if(cur !== el.attr("id")) // проверяем является ли этот блок тем, что был ранее в записи, если нет, то
{
cur = el.attr("id"); // Сохраняем его (НЕ УДАЛЯТЬ)
// el.css("background", "green"); // Для демо, мы показываем его зелёным
console.log(el.attr("id")); // И выводим его ID в консоль.
// Вместо кода выше, нужно оказать ваш AJAX запрос.
}
}
else // Если скролл не на границе
{
if(cur === el.attr("id")) // Проверим является ли он тем, что в записи
{
// el.css("background", ""); // удалим у него фон
console.log("ушли с "+cur); // покажем что мы с него ушли
// Тут может быть какое-то обратное действие, допустим снять класс с объекта который покинул область видимости.
}
}
});
});