滚动时获取固定div上重叠div的id

Question

我有一个固定的div，当我滚动时，一些div与固定的div重叠。所以我的问题是我需要获得重叠div的id？我是jQuery的新手。这是我的代码

function collision($fixed, $moving) {
var x1 = $fixed.offset().left;
var y1 = $fixed.offset().top;
var h1 = $fixed.outerHeight(true);
var w1 = $fixed.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $moving.offset().left;
var y2 = $moving.offset().top;
var h2 = $moving.outerHeight(true);
var w2 = $moving.outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
$(window).scroll(function() {
var all = $(".moving");
for (var i = 0; i < all.length; i++) {
if (collision($(".fixed"), all.eq(i))) {
console.log($('.moving').attr('id'));/* Help  Needed here */
} else {
$('.fixed').css('color', 'black');
}
}
});

.fixed {
color: black;
position: fixed;
top: 50px;
}
.moving {
width: 400px;
height: 100px;
background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed">
Fixed Element
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving" id='1'>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving" id='2'>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving" id='3'>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

我只得到第一个重叠分区的id。

Answer 1

$('.moving')返回元素列表，在该列表上调用.attr('id')仅返回第一项的id属性。

相反，您希望使用all.eq(i).attr('id')来获取第i个元素的ID，因为您正在检查循环内部的冲突。

function collision($fixed, $moving) {
var x1 = $fixed.offset().left;
var y1 = $fixed.offset().top;
var h1 = $fixed.outerHeight(true);
var w1 = $fixed.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $moving.offset().left;
var y2 = $moving.offset().top;
var h2 = $moving.outerHeight(true);
var w2 = $moving.outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
$(window).scroll(function() {
var all = $(".moving");
for (var i = 0; i < all.length; i++) {
if (collision($(".fixed"), all.eq(i))) {
console.log(all.eq(i).attr('id'));
} else {
$('.fixed').css('color', 'black');
}
}
});

.fixed {
color: black;
position: fixed;
top: 50px;
}
.moving {
width: 400px;
height: 100px;
background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed">
Fixed Element
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving" id='1'>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving" id='2'>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving" id='3'>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>