检测div是否在浏览器窗口中可见

Question

我有多个可折叠的div，如此

+--------------+
| Div 1        |
+--------------+
| Div 2        |
+--------------+
| Div 3        |
+--------------+

现在，当我点击其中一个div时，它会展开

问题：如何检测扩展的div在浏览器窗口（底部边框）上展开？

Answer 1

你可以尝试这个，这是一个未经考验的想法，因此可能需要进行一些修改。

var div1Height = $("#div1").height();
var div2Height = $("#div2").height();
var div3Height = $("#div3").height();
var windowSize = $(window).height();


//assign function for on click (you'll want to change this)
$("#div1, #div2, #div3").click(function(e){
if(div1Height > windowSize){
//assuming div1 is at the top
console.log("div 1 passing extents");
}
if((div2Height + parseInt($("#div2").position().top) > windowSize){
console.log("div 2 passing extents");
}
if((div3Height + parseInt($("#div3").position().top) > windowSize){
console.log("div 3passing extents");
}

});