Javascript 匹配浮动菜单和容器的偏移量以更改类

我有一个由列表元素构建的简单菜单，它漂浮在全宽容器上。因为其中一些容器比其他容器暗，所以我希望能够定义每个菜单元素何时覆盖它们

因此，我向较暗的容器中添加了一些类，并编写了一个函数来获取它们的偏移量：

function getOffsets(){
    var offsets = [],
        colorChangers = $(".colorChange").length,
        top,
        bottom;

    for(i = 0; i < colorChangers; i++){
        top = $(".colorChange").eq(i).offset().top; // where container begins
        bottom = top + $(".colorChange").eq(i).css("height"); // where container ends
        offsets.push(top);
        offsets.push(bottom);
    }

    return offsets;
}

函数getOffsets（）{ var偏移量=[]， colorChangers=$（“.colorChange”）.length， 顶部 底部； 对于（i=0；i 接下来，我想在窗口滚动事件期间比较.colorChange容器和菜单元素的偏移量。 如果匹配，我希望在菜单中切换该元素的其他类：

function setMenu(toggleAt){
    var winScrollTop = $(window).scrollTop(),
        newPos = 90 + winScrollTop,
        topPos,
        item = $("#FloatMenu ul li"),
        menuItems = item.length;

    if(winScrollTop > 90){
        $("#FloatMenu").is(":visible") ? "" : $("#FloatMenu").show();
        topPos = (newPos - 90) + 10;        
        $("#FloatMenu").css("top", topPos);
    } else{
        $("#FloatMenu").hide();
    }

    for(i = 0; i < menuItems; i++){
        $this = item.eq(i);
        for(var j in toggleAt){
            $this.offset().top == toggleAt[j] ? $this.toggleClass("white") : ""; // toggle class "white"
        }
    }
}

功能设置菜单（toggleAt）{
var winScrollTop=$（窗口）.scrollTop（），
newPos=90+winScrollTop，
托波斯，
项目=$（“#浮点数”），
menuItems=项目长度；
如果（winScrollTop>90）{
$（“#FloatMenu”）.is（“：visible”）？：$（“#FloatMenu”）.show（）；
topPos=（newPos-90）+10；
$（“#FloatMenu”）.css（“top”，topPos）；
}否则{
$（“#FloatMenu”）.hide（）；
}
对于（i=0；i

---

不幸的是，它不能正常工作（有时如果你慢慢地使用滚动条），你知道为什么吗？以下是我对解决方案的看法：

-滚动显示
--获取菜单元素偏移顶部
--使用document.elementFromPoint（x，y）获取从该点（偏移量）开始的容器
--检查元素是否具有class.colorChange，如果没有，则搜索元素.parents（'colorChange'），以查看其父元素是否具有colorChange类。
--如果它具有该类，请更改元素的颜色

现在，我将尝试一些编码（希望对您有所帮助）：

---

document.elementFromPoint方法返回最近的元素，这并不一定意味着它与每个菜单项具有相同的顶部偏移量。所以他们很早就变白了。感谢您的回答thoughelementFromPoint返回文档中给定点处的元素。。。最上面的元素。您的工作是使用parents（）方法或任何其他helpfull方法查找相对于elementFromPoint的容器颜色更改。。。

$(window).scroll(function(e){
    $('.menu_elment').each(function(index) {
        menu_elem_offset_top = $(this).offset().top;  
        container_elem = document.elementFromPoint(0,$(this).offset().top);
        if($(container_elem).hasClass('colorChange') || $(container_elem).parents('.colorChange').length != 0) {
            // change the color of the menu 
            $(this).css({'color':'#fff'});
        }
    });
});