jquery - 使用jquery获取多个div的高度

Question

我需要获取三个 div 的高度，将它们加在一起，看看滚动位置是否大于该数字。现在我可以得到一个元素的高度，但是我怎么能添加其他元素呢？

基本上，我想写“如果scroll_top大于div 1 + div 2 + 3的高度”

var scroll_top = $(window).scrollTop();

if ((scroll_top > $('.nav-bar-fixed').height()) {
    alert('sometext');
}

Answer 1

为什么不简单地这样做呢？

var h = 0;
$('#div1, #div2, #div3').each(function(){ h+=$(this).height() });

Answer 2

这应该可以解决问题。

JS Bin 上的工作示例。

HTML：

  <div class="nav-bar-fixed"></div>
  <div class="nav-bar-fixed"></div>
  <div class="nav-bar-fixed"></div>

CSS：

.nav-bar-fixed {
  height: 200px;
}

JavaScript：

var scroll_top = $(window).scrollTop(),
    $navBarFixed = $('.nav-bar-fixed'),
    totalHeight = 0;

$.each($navBarFixed, function() {
    totalHeight += $(this).height();
});

if (scroll_top > totalHeight) {
    alert(totalHeight);
}

Answer 3

试试这个：

$(document).ready(function() {
var limit =$('.myEle1').height() + $('.myEle2').height() + $('.myEle3').height();
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > limit ) {
           //do something.
        }
    });
 });​

这是一个固定的导航示例和来源。

Answer 4

你可以实现这个基于 JQuery 的函数：

(function ($) {
   $.fn.sumHeights = function () {
      var h = 0;
      this.each(function() {
         h += $(this).height();
      });
      return h;
   };
})(jQuery);

然后这样称呼它：

$('div, .className, #idName').sumHeights();