javascript - ウィンドウの中心より下にある一連の要素を検出する方法

Question

セットのどの要素が現在ビューポートの中心にあるかを検出する方法に関するアイデアを探しています。

ドキュメント内で互いに積み重ねられた一連のブロック レベル要素から。これらのうち、現在ビューポートの中心にある架空の固定位置の十字線の下にあるものを検出するにはどうすればよいですか?

// 

出発点: http://jsfiddle.net/Xbhcv/

Answer 1

これはおそらくよりクリーンになる可能性がありますが、これは基本的に必要なことを行うはずです:

// How to get the id of the element .detector div currently under the crosshairs?
      var crosshairPositionTop = $(".crosshairs").offset().top,
                crosshairPositionLeft = $(".crosshairs").offset().left,
                detectorPositionTop, detectorPositionLeft;
        $(".detector").each(function() {
            detectorPositionTop = $(this).offset().top;
            detectorPositionLeft = $(this).offset().left;
            if (detectorPositionTop < crosshairPositionTop && detectorPositionLeft < crosshairPositionLeft) {
                console.log($(this).attr("id"))
            }
        })

http://jsfiddle.net/Xbhcv/7/

Answer 2

最初に中心位置を抽出します。

var center_x = Math.floor(window.innerWidth/2);
var center_y = Math.floor(window.innerHeight/2);

center_x次に、確認したいすべての要素を繰り返し処理し、とがそれらの範囲内にあるかどうかを確認center_yします。

$(".detector").each(function(){
    x = $(this).offset().left;
    y = $(this).offset().top - $(document).scrollTop();
    w = $(this).width();
    h = $(this).height();
    if(center_x > x && center_y > y && center_x < x+w && center_y < y+h){
        // the $(this) element intersects with the centre
        $(this).attr('id')
    }
}

$(window).scrollこれをすべてイベントにラップします。

JSFiddle