Javascript 滚动时检测主要位于视口/中心的DIV

试图知道某个元素在视口中何时最为可见，何时主要位于中心。我想让所有其他的DIV都淡出，但当你滚动的时候，让更主要的DIV保持完全不透明度

我发现了这一点：但它是按像素计算的，没有我所需要的逻辑，无法像下图那样工作

---

在滚动事件上，如果容器中的每个div在所需区域中具有边框（在容器中的每个div上使用

getBoundingClientRect

函数），则可以测试容器中的每个div。在这里，您还可以通过一些简单的公式来测试这个矩形的可视程度，并相应地设置不透明度

您需要一个测试元素是否完全在页面边界内的方法。有一些插件可以做到这一点，比如Remy Sharp的或，但本质上，您只需要测试一个元素是否完全在视图中，并向其添加一个类

所有这些都相对简单（尽管我承认还没有测试过这款x浏览器）：

功能测试视图（$el）{
var wTop=$（window.scrollTop（）；
var wBot=wTop+$（window.height（）；
var eTop=$el.offset（）.top；
var eBot=eTop+$el.height（）；
返回（（eBot=wTop））；
}
函数setInView（）{
$（“div”）.each（function（）{//测试每个div（您可能希望在实现中更加具体）
var$zis=$（此）；
$zis.removeClass（“inview”）；
if（测试视图（$zis））{
$zis.addClass（“inview”）；
}
});
}
$（文档）。滚动（函数（）{
setInView（）；
});
$（文档）。调整大小（函数（）{
setInView（）；
});
$（文档）.ready（函数（）{
setInView（）；
});

---

当然可以。您可以使用jquery以任何方式破坏DOM结构。做什么？请澄清这个问题。很抱歉。我添加了更多的说明并添加了一些研究。当然，使用JQuery，因为本机实现很蹩脚。。。。（我只是小气而已）@helly0d-我同意你的看法。我只是懒得使用jQuery；）这太神奇了。。。非常感谢。我无法理解查找每个div相对于滚动条的位置的逻辑，但知道哪个div主要是可视的。谢谢你。@Tom-在某些情况下，可能没有一个元素可以完全显示出来。您可以执行额外的测试来确定哪些元素是视图中最清晰的，或者您可以采取简单的方法，只需添加一个偏移量，允许元素超出边界太多像素。@Tom您可以调整脚本以检查元素是否超过页面的中点，例如

function testInView($el){
    var wTop = $(window).scrollTop();
    var wBot = wTop + $(window).height();
    var eTop = $el.offset().top;
    var eBot = eTop + $el.height();
    return ((eBot <= wBot) && (eTop >= wTop));
}
function setInView(){
    $("div").each(function(){//testing EVERY div (you might want to be more specific in your implementation)
        var $zis = $(this);
        $zis.removeClass("inview");
        if(testInView($zis)){
           $zis.addClass("inview");   
        }
    });
}
$(document).scroll(function(){
    setInView();
});
$(document).resize(function(){
    setInView();
});
$(document).ready(function(){
    setInView();
});