【jQuery】要素が画面内に入ったかどうかを判定する方法

     




画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる

.item {
    font-size: 16px;
    padding: 10px;
    border: 1px solid red;
    margin-bottom: 500px;
}

$(function(){
    $('.item').on('inview', function(event, isInView) {
        if(isInView) { 
            $(this).animate({
                fontSize : '20px'
            }, 1000);
        }
    });
});

$(function(){
    //スクロールの度に実行
    $(window).scroll(function(){
        if(existsElementInView('element-name')) {
            //画面内にあるときの処理
            //画面内にあるときの処理
            //画面内にあるときの処理
        }
    });


    //要素が画面内に存在するかどうかをチェックする(厳密には指定の要素の"上端の座標"でチェックする)
    function existsElementInView(element) {
        console.log('-------');
        var position = $(element).offset().top; // 画面内にあるかどうかを調べたい対象の要素の"上端"の座標

        var view_height = $(window).height();     // 画面の高さ
        var view_top    = $(window).scrollTop();  // 画面の表示領域の最上部
        var view_bottom = view_top + view_height; // 画面の表示領域の最下部

        console.log('position : ' + position);
        console.log('view_height   : ' + view_height);
        console.log('view_top      : ' + view_top);
        console.log('view_bottom   : ' + view_bottom);

        //要素が画面内にあるかどうかをチェック
        if(position >= view_top && position <= view_bottom) {
            console.log('画面内にある : ' + element);
            return true;
        }

        console.log('画面内にない : ' + element);
        return false;
    }
});