javascript - 如何检测一组元素中的哪一个低于窗口中心

Question

寻找有关如何检测集合中的哪个元素当前位于视口中心的想法。

来自文档中相互堆叠的一组块级元素。如何检测其中哪些当前位于视口中心的假想固定位置十字准线下？

// 

起点：http: //jsfiddle.net/Xbhcv/

Answer 1

First extract the centre position:

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

Then iterate over all the elements you want to check and check if the center_x and center_y fall within them.

$(".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')
    }
}

and wrap this all in a $(window).scroll event.

JSFiddle

Answer 2

这可能更干净，但这基本上应该满足您的需要：

// 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 3

这里有一些代码可以找到你的十字准线位置（绿色方块的确切中心），并循环遍历每个detectordiv 以查看哪个 div 包含它。它将包含的 div 打印到控制台并在屏幕上以红色突出显示。

http://jsfiddle.net/mchail/Xbhcv/6/