Jquery：addClassをアクティブにする要素の高さを要素の高さから見つけます。

Question

Jquery beginner here。

私は現在、以下のスクリプトを使用して要素を見つけて、その要素からスクロール位置に基づいてクラスを追加/削除しています。

暗い背景の上に固定ナビゲーションアイコンの色を変更しようとしています。

現在、私のコードでは、要素が見つかった後、ユーザーが1000pxをスクロールしたときに要素1を見つけて要素2に追加します。それは動作しますが、ページが反応してセクションの高さが変わるため理想的ではありません。 http://leebuckle.co.uk/

同上部2の高さは、だから、ユーザーがスクロールしたら、それをクラスを追加、セクション2の高さを見つけ、のような：

あなたがここで見ることができますが、セクション2は、トップセクションの下の白い部分であります+ 1000pxではなく+（section_2高さ）になります

ありがとうございます！

$(document).ready(function(){ 
    var div = $("#section_2"); 
    var pos = div.position(); 

$(window).scroll(function() { 
    var windowpos = $(window).scrollTop(); 

    if (windowpos >= (pos.top + 1000)) { 
    $("#nav-icon span").addClass("black_menu"); 
    } 

else { 
    $("#nav-icon span").removeClass("black_menu"); 
    } 

    }); 
}); 

Answer 1

あなたは、ドキュメントの先頭から要素の位置を取得するためにjQueryのからoffsetを使用することができます。

if (windowpos >= (pos.top + 1000)) { ...

を持って

だからあなたのラインのようなものに見えることがありますsection2の+ .height()のトップの位置を取得するために

if (windowpos >= (div.offset().top)) { ...

Answer 2

使用jQueryの.offset()を得るためにあなたのセクション2の高さは動的に変化します。

if (windowpos >= (div.offset().top + div.height()))