Соответствующие смещения плавающего меню и контейнеров для изменения класса

Question

У меня есть простое меню, состоящее из элементов списка, которое плавает над контейнерами полной ширины. Поскольку некоторые из этих контейнеров более темные, чем остальные, я хотел бы иметь возможность определить, когда на них находят элементы из меню.

Поэтому я добавил некоторые классы в контейнеры, которые темнее и написал функцию, которая получает их смещения:

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

К сожалению, это не работает должным образом (время от времени, если вы используете скроллбар медленно), любая идея почему? Вот fiddle

Answer 1

Вот как я вижу решение:

-На свиток
--get элемент меню смещения верхней части;
- Установите контейнер, который начинается с этой точки (смещение) с помощью 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'}); 
     } 
    }); 
});