使用jquery获取多个div的高度

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

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

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

Answer 1

试试这个：

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

这是一个固定的导航样本和来源。

Answer 2

为什么不简单呢？

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

Answer 3

这应该可以解决问题。

关于JS Bin的工作示例 。

HTML：

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 4

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

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

然后像这样调用它：

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