获取屏幕上最明显的元素

Question

我想得到一个在屏幕上最明显的元素(占用最多的空间).我在下面添加了一个示例图片,以便更多地了解我的问题.

两个黑色边框是屏幕的两侧.如您所见,绿色框(div2)在屏幕上最明显 - 我想知道如何获得该元素.最明显的元素不应该是完全可见的.

我做了一个快速(这不是那么快)的搜索,但无济于事,如果我错过了 - 我的道歉.

Answer 1

TLDR:

受到这个问题的启发以及我自己项目中类似功能的必要性,我根据下面的代码编写了一个模块/ jQuery插件.如果您对'how'不感兴趣,只需下载或安装您喜欢的包管理器即可.

原答案:

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 $elements.filter(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 $elements.filter(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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="the-divs">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>