JavaScriptプログラムに関する各種メモ書き

jQueryで "ある要素" が画面内にあるかどうかを判別する

jQueryで "ある要素" が画面内にあるかどうかを判別するには

要素のページ内での位置(Y座標)、現在のスクロール位置(Y座標)を見て判別します。

$(function() {
    // 引き金となる要素を設定
    var triggerNode = $(".trigger");
    // 画面スクロール毎に判定を行う
    $(window).scroll(function(){
        // 引き金となる要素の位置を取得
        var triggerNodePosition = $(triggerNode).offset().top - $(window).height();    
        // 現在のスクロール位置が引き金要素の位置より下にあれば‥
        if ($(window).scrollTop() > triggerNodePosition) {
            // なんらかの命令を実行
            console.debug("Do Something");
        }
    });

引用元:http://hennayagyu.com/webhack/javascript/

ある要素が表示されたときに命令を実行するjavascript-w-jquery-2348


関連エントリー

No.879
05/30 10:08

edit

jQuery