Jquery inview добавление класса к последнему элементу

Я пытаюсь использовать плагин jquery inview, чтобы добавить класс к элементу, когда он находится в области просмотра. По какой-то причине плагин только добавляет класс к самому последнему элементу, хотя другие элементы четко видны в области просмотра. Ниже мой код:

HTML:

<div class="container-fluid">
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
     <article class="entry"></article>
</div>

JQuery:

$(function() {
    $('.entry').bind('inview', function (event, visible) {
        if (visible) {
            $(this).addClass('show-post');
        }
    });
});
Источник

1 ответ

Поместите свой сценарий в готовый: я меняю цвет на зеленый, чтобы показать эффект, который класс show-post добавлен.

<!DOCTYPE html>
<html>
<head>
  <title>jquery.inview - Example</title>
  <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script src="https://protonet.info/wp-content/themes/protonet/js/jquery.inview.js"></script>

<style>
.show-post{
color:green;
}
</style>
</head>
<body>
<div class="container-fluid">
     <article class="entry">hi</article>
     <article class="entry">sfsdf</article>
     <article class="entry">sdfsd</article>
     <article class="entry">sdfds</article>
     <article class="entry">sdfds</article>
     <article class="entry">sdfs</article>
</div>
</body>
<footer>
<script>
$(document).ready(function() {
 $('.entry').bind('inview', function (event, visible) {
     if (visible) {
         $(this).addClass('show-post');
     }
 });
 
 });
</script>
</footer></html>

Источник
Другие вопросы по тегам