スクロール時にdivのトップポジション値を取得する方法

Question

divがスクロールされたときにdivが特定のポイントに達すると、スクリプトを実行しようとしています。固定されたナビゲーションがあり、ユーザーがウィンドウをスクロールすると、ナビに近づくとナビゲーション名が変更されます。 $（window）.scroll関数を使用していますが、div位置を一度しかチェックせず、値を更新しません。 5〜10ピクセルごとにウィンドウのサイズをスクロールして確認する方法は、あまりにも多くのメモリ/処理を必要としません。 コードがで設定されている：http://jsfiddle.net/rexonms/hyMxq/

HTML

<div id="nav"> NAVIGATION 
    <div class="message">div name</div> 
</div> 
<div id="main"> 
<div id="a">Div A</div> 
<div id ="b"> Div B</div> 
<div id ="c"> Div C</div> 
</div>​ 

CSS

#nav { 
    height: 50px; 
    background-color: #999; 
    position:fixed; 
    top:0; 
    width:100%; 

} 

#main{ 
    margin-top:55px; 
} 
#a, #b, #c { 
    height:300px; 
    background-color:#ddd; 
    margin-bottom:2px; 
} 

SCRIPT

$(window).scroll(function() { 

    var b = $('#b').position(); 

    $('.message').text(b.top); 

    if (b.top == 55) { 
     $('.message').text("Div B"); 
    } 
});​ 

Answer 1

このjsFiddle example

01試してみてください

元のコードでは、変更されない文書の上部に対するdivの位置を確認していました。ウィンドウがスクロールされた量を計算し、それに応じて計算する必要があります。

また、jQueryの.position()と.offset()メソッドの違いに注意してください。 .position()メソッドを使用すると、オフセットの親に対する要素の現在の位置を取得できます。これを文書との相対的な現在の位置を取得する.offset()と対比してください。