计算元素（高度）在视口中的像素数量

小提琴演示

这个小函数将返回px在（垂直）视口中可见的元素数量：

function inViewport($el) {
    var elH = $el.outerHeight(),
        H   = $(window).height(),
        r   = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}

像这样使用：

$(window).on("scroll resize", function(){
  console.log( inViewport($('#elementID')) ); // n px in viewport
});

而已。

jQuery.inViewport()插件

jsFiddle 演示

从上面你可以提取逻辑并创建一个像这样的插件：

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

像这样使用：

$("selector").inViewport(function(px) {
  console.log( px ); // `px` represents the amount of visible height
  if(px > 0) {
    // do this if element enters the viewport // px > 0
  }else{
    // do that if element exits  the viewport // px = 0
  }
}); // Here you can chain other jQuery methods to your selector

您的选择器将动态侦听 windowscroll并且resize还会通过第一个回调函数参数返回 DOM ready 的初始值px。

这是一个快速而肮脏的概念。它基本上将offset().top元素的 与窗口顶部和窗口offset().top + height()底部进行比较：

function getVisible() {
  var $el = $('#foo'),
    scrollTop = $(this).scrollTop(),
    scrollBot = scrollTop + $(this).height(),
    elTop = $el.offset().top,
    elBottom = elTop + $el.outerHeight(),
    visibleTop = elTop < scrollTop ? scrollTop : elTop,
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
  $('#notification').text(`Visible height of div: ${visibleBottom - visibleTop}px`);
}

$(window).on('scroll resize', getVisible).trigger('scroll');

html,
body {
  margin: 100px 0;
}

#foo {
  height: 1000px;
  background-color: #C00;
  width: 200px;
  margin: 0 auto;
}

#notification {
  position: fixed;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo"></div>
<div id="notification"></div>

如有必要，逻辑可以更简洁，我刚刚为这个例子声明了单独的变量，以使计算尽可能清晰。

这是上面 Rory 方法的一个版本，除了编写为用作 jQuery 插件之外。它在该格式中可能具有更广泛的适用性。很好的答案，罗里 - 谢谢！

$.fn.visibleHeight = function() {
    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
    scrollTop = $(window).scrollTop();
    scrollBot = scrollTop + $(window).height();
    elTop = this.offset().top;
    elBottom = elTop + this.outerHeight();
    visibleTop = elTop < scrollTop ? scrollTop : elTop;
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return visibleBottom - visibleTop
}

可以通过以下方式调用：

$("#myDiv").visibleHeight();

js小提琴