5

divがスクロールされたときに特定のポイントに到達したときに、スクリプトを実行しようとしています。固定ナビゲーションがあり、ユーザーがウィンドウをスクロールすると、ナビゲーションに近づいたらナビゲーション名を変更すると想定されます。$（window）.scroll関数を使用していますが、divの位置を1回だけチェックし、値を更新していません。スクロールを作成する方法は、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;
}

脚本

$(window).scroll(function() {

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

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

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

1 に答える 1

9

このjsFiddleの例を試してください

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop(),
        divOffset = $('#b').offset().top,
        dist = (divOffset - scrollTop);
    $('.message').text(dist);
    if (b.top == 55) {
        $('.message').text("Div B");
    }
});​

元のコードは、ドキュメントの上部を基準にしたdivの位置をチェックするだけで、変更されることはありません。ウィンドウで発生したスクロール量を計算し、それに応じて計算する必要があります。

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

于 2012-09-19T21:01:22.067 に答える