TLDR:

Вдохновленный этим вопросом и необходимостью аналогичной функциональности в моих собственных проектах, я написал модуль / jQuery plugin на основе приведенного ниже кода. Если вы не интересуетесь «как», просто загрузите это или установите с помощью своего любимого менеджера пакетов.

Исходный ответ:

Ответ , предоставленный exabyssus хорошо работает в большинстве случаев, если не видно ни верхнего, ни нижнего элемента, например, когда высота элемента больше высоты окна.

Вот обновленная версия, учитывающая этот сценарий и использует getBoundingClientRect , который поддерживается , вплоть до IE8 :

// Usage: var $element = getMostVisible( $( '.elements' ) );
function getMostVisible( $elements ) {
    var $element = $(),
        viewportHeight = $( window ).height(),
        max = 0;

    $elements.each( function() {
        var visiblePx = getVisibleHeightPx( $( this ), viewportHeight );

        if ( visiblePx > max ) {
            max = visiblePx;
            $element = $( this );
        }
    } );

    return $element;
}

function getVisibleHeightPx( $element, viewportHeight ) {
    var rect = $element.get( 0 ).getBoundingClientRect(),
        height = rect.bottom - rect.top,
        visible = {
            top: rect.top >= 0 && rect.top < viewportHeight,
            bottom: rect.bottom > 0 && rect.bottom < viewportHeight
        },
        visiblePx = 0;

    if ( visible.top && visible.bottom ) {
        // Whole element is visible
        visiblePx = height;
    } else if ( visible.top ) {
        visiblePx = viewportHeight - rect.top;
    } else if ( visible.bottom ) {
        visiblePx = rect.bottom;
    } else if ( height > viewportHeight && rect.top < 0 ) {
        var absTop = Math.abs( rect.top );

        if ( absTop < height ) {
            // Part of the element is visible
            visiblePx = height - absTop;
        }
    }

    return visiblePx;
}

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

Вы также можете использовать это как плагин jQuery, чтобы вы могли получить наиболее видимый элемент с помощью $('.elements').mostVisible(), а не передавать элементы функции. Для этого вам просто нужно включить это с двумя вышеперечисленными функциями:

$.fn.mostVisible = function() {
    return getMostVisible( this );
};

С помощью этого вы можете связать вызовы методов, а не сохранять элемент в переменную:

$( '.elements' ).mostVisible().addClass( 'most-visible' ).html( 'I am most visible!' );

Вот все, что было сделано в небольшой демоверсии, вы можете попробовать прямо здесь, на SO:

(function($) {
  'use strict';

  $(function() {
    $(window).on('scroll', function() {
      $('.the-divs div').html('').removeClass('most-visible').mostVisible().addClass('most-visible').html('I am most visible!');
    });
  });

  function getMostVisible($elements) {
    var $element = $(),
      viewportHeight = $(window).height(),
      max = 0;

    $elements.each(function() {
      var visiblePx = getVisibleHeightPx($(this), viewportHeight);

      if (visiblePx > max) {
        max = visiblePx;
        $element = $(this);
      }
    });

    return $element;
  }

  function getVisibleHeightPx($element, viewportHeight) {
    var rect = $element.get(0).getBoundingClientRect(),
      height = rect.bottom - rect.top,
      visible = {
        top: rect.top >= 0 && rect.top < viewportHeight,
        bottom: rect.bottom > 0 && rect.bottom < viewportHeight
      },
      visiblePx = 0;

    if (visible.top && visible.bottom) {
      // Whole element is visible
      visiblePx = height;
    } else if (visible.top) {
      visiblePx = viewportHeight - rect.top;
    } else if (visible.bottom) {
      visiblePx = rect.bottom;
    } else if (height > viewportHeight && rect.top < 0) {
      var absTop = Math.abs(rect.top);

      if (absTop < height) {
        // Part of the element is visible
        visiblePx = height - absTop;
      }
    }

    return visiblePx;
  }

  $.fn.mostVisible = function() {
    return getMostVisible(this);
  }

})(jQuery);

.top {
  height: 900px;
  background-color: #999
}
.middle {
  height: 200px;
  background-color: #eee
}
.bottom {
  height: 600px;
  background-color: #666
}