Чтобы проверить, виден ли элемент в области просмотра с помощью JavaScript/jQuery, вы можете использовать несколько методов. Вот некоторые из наиболее часто используемых:

1. Метод смещения:

   function isElementVisible(element) {
    var rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
   }

2. Метод jQuery:

   function isElementVisible(element) {
    var $element = $(element);
    var $window = $(window);
    var windowTop = $window.scrollTop();
    var windowBottom = windowTop + $window.height();
    var elementTop = $element.offset().top;
    var elementBottom = elementTop + $element.height();
    return (
      elementTop <= windowBottom && elementBottom >= windowTop
    );
   }

3. Метод API Intersection Observer (современные браузеры):

   function isElementVisible(element) {
    var observer = new IntersectionObserver(function(entries) {
      return entries[0].isIntersecting;
    });
    observer.observe(element);
   }

4. Метод события прокрутки:

   function isElementVisible(element) {
    var $element = $(element);
    var $window = $(window);
    var windowTop = $window.scrollTop();
    var windowBottom = windowTop + $window.height();
    var elementTop = $element.offset().top;
    var elementBottom = elementTop + $element.height();
    return (
      elementTop <= windowBottom && elementBottom >= windowTop
    );
   }
   $(window).scroll(function() {
    if (isElementVisible(element)) {
      // Element is visible in viewport
    }
   });