0

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

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

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;
}

接下来我想在窗口滚动事件期间比较 .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"
        }
    }
}

不幸的是它不能正常工作（有时如果你慢慢地使用滚动条），知道为什么吗？这是小提琴

4

1 回答 1

1

这是我如何看待解决方案：

-On scroll--
获取菜单元素偏移顶部；
-- 使用 document.elementFromPoint(x,y) 获取从该点（偏移量）开始的容器；
-- 检查元素是否有 .colorChange 类，如果没有，请搜索 element.parents('colorChange') 以查看它的任何父项是否有 colorChange 类。
-- 如果它有那个类，改变元素的颜色。

现在我尝试一些编码（希望它有所帮助）： 

$(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'});
        }
    });
});
于 2013-07-30T14:44:23.717 回答