使用jquery获取多个div的高度

时间:2013-02-08 22:05:23

标签: jquery jquery-selectors

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

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

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

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

4 个答案:

答案 0 :(得分:11)

为什么不简单呢?

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

答案 1 :(得分:4)

这应该可以解决问题。

Working example on 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);
}

答案 2 :(得分:2)

试试这个:

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

Here is a fixed nav samplesource.

答案 3 :(得分:1)

您可以实现这个基于JQuery的功能:

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

然后像这样称呼它:

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