Самый длинный элемент в области просмотра

Question

Я пытаюсь установить «активный» класс для наиболее видимого элемента на странице. С помощью этого кода я смог установить «активным» классом элементы, которые появляются на странице.

Я делаю это для моего проекта бесконечной прокрутки. Если я могу дать активный класс своему целевому элементу, я могу изменить URL-адрес и заголовок страницы для процесса публикации в социальных сетях.

    $.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  $('article').each(function() {
    if ($(this).isInViewport()) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});

<article>
    <h1>Title 1</h1>
    <p>Text...
    ..
    .</p>
</article>
<article>
    <h1>Title 2</h1>
    <p>Text2...
    ..
    .</p>
</article>
<article>
    <h1>Title 2</h1>
    <p>Text2...
    ..
    .</p>
</article>
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Не уверен, что является наиболее видимым, но вы можете использовать флаг, который указывает, был ли обнаружен видимый элемент, сбросить все элементы и установить активный класс на первый найденный вами.

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom && elementTop > viewportTop;
};


$(window).on('load resize scroll', function() {
  var activeFound = false;
  $('article').each(function() {
    if (!activeFound) {
      if ($(this).isInViewport()) {
        $("article.active").removeClass("active");
        $(this).addClass('active');
        activeFound = true;
      }
    }
  });
});

.active {
  color: blue;
}

<article>
  <h1>Title 1</h1>
  <p>Text... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>
<article>
  <h1>Title 1</h1>
  <p>Text... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>
<article>
  <h1>Title 1</h1>
  <p>Text... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>
<article>
  <h1>Title 1</h1>
  <p>Text... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>
<article>
  <h1>Title 2</h1>
  <p>Text2... .. .
  </p>
</article>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>