jquery - jqueryで複数のdivの高さを取得する

Question

3つのdivの高さを取得し、それらを合計して、スクロール位置がその数よりも大きいかどうかを確認する必要があります。現在、1つの要素の高さを取得できますが、他の要素を追加するにはどうすればよいですか？

基本的には、「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.
        }
    });
 });​

これが固定ナビゲーションサンプルとソースです。