爲了改變類匹配浮動菜單和容器的偏移量

我有一個由列表元素構成的簡單菜單，它漂浮在全寬度容器上。因爲其中一些容器比其他容器更暗，所以我希望能夠定義菜單的每個元素何時都會覆蓋它們。爲了改變類匹配浮動菜單和容器的偏移量

所以我增加了一些類是較深的容器，並寫入了他們獲得補償的功能：窗口滾動時

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

來源

2013-07-30 Az.

這裏是我看到的解決辦法：

-On滾動
--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'}); 
     } 
    }); 
});

來源

2013-07-30 14:44:23

document.elementFromPoint方法返回這並不一定意味着它具有相同的頂部，每個菜單項的偏移最接近的元素。所以他們早早就把白色的方式化了。感謝您的回答，儘管 –

elementFromPoint返回文檔中給定點處的元素...最頂端的元素。這是你的工作，找到相對於elementFromPoint的容器colorChange，使用parents（）方法或任何其他有用的方法... https://developer.mozilla.org/zh-CN/docs/Web/API/document.elementFromPoint –

爲了改變類匹配浮動菜單和容器的偏移量

回答

相關問題