檢測元素是否懸停在部分上

Question

我有網站上的側面點導航 - 標準position: fixed點導航。現在我在同一個網站上也有兩種類型的背景 - 讓我們假設一個是白色的，另一個是黑色的。我的問題是，當導航懸停黑色部分時，點不可見時。所以我試圖編寫腳本，檢測部分是否具有某些類，如果某個點在此部分 - 如果是，則點的顏色會發生變化。我取得了一定的成功，但在完成之後，我意識到我的腳本只能以一種方式工作（從上到下滾動），即使我將檢測到從上到下的滾動，當我在網站中間改變方向時，它也無法正常工作。我很早就花了這麼長時間，並且很無能 - 這裏是我迄今爲止的代碼 - 當你從上到下滾動時，它的工作。

你有其他任何建議或也許某些庫來解決這個問題？

編輯：佈局是相當藝術 - 所以有一些框左右浮動動態和點也必須改變時，有盒，爲什麼我拼接我的陣列，並推動#myname它。

EDIT2：你可以看到它是如何工作的這個鏈接（沒有優化，加載速度緩慢http://lektor.ionstudio.pl/）

var sections = []; 
$("section[id]").each(function() { 
    sections.push("#" + this.id); 
}) 
sections.splice(0,0,"#myname"); 
i = 0; 


$(window).scroll(function(){ 
    var content = $("section.current").hasClass("white-section"); 
    $("#banner .navigation li").each(function(){ 
     var thisElem = this.getBoundingClientRect(); 



     section = sections[i]; 

     section = document.querySelector(section); 
     sectionRect = section.getBoundingClientRect(); 



     if(sectionRect.top - thisElem.top <= 0) { 
      if($(section).hasClass("white")) { 
       $(this).addClass("black"); 
      } else { 
       $(this).removeClass("black"); 
      } 
      if(sectionRect.top + $(section).outerHeight(true) <= thisElem.top) { 
       i++; 
      } 
     } 


    }) 
}) 

Answer 1

它只適用的，因爲你是循環的方式對一個雙向滾動下。你需要刪除函數中'i'增量的依賴。

您使用此增量的唯一原因是您需要能夠唯一標識該部分。

您是否可以將一些元數據添加到「this」元素，您可以用它來標識該部分？像

<li data-sectionID="999" ....>Menu Node</li> 
... 
section = $(this).data("sectionID"); 

Answer 2

正如我會用elementFromPoint的評論中提到的東西來檢查點過來與特定類的部分。

試試這個：

(function(win, doc) { 
 
    var dotsSelector = '.dot'; 
 
    var sectionsSelector = 'section'; 
 
    var classes = ['white', 'black']; 
 
    var dots = [].slice.call(doc.querySelectorAll(dotsSelector)); 
 
    var dotPositions = dots.map(function(dot) { 
 
    var rect = dot.getBoundingClientRect(); 
 
    return rect.top + rect.height/2 ;       
 
    }); 
 
    var sections = [].slice.call(doc.querySelectorAll(sectionsSelector)); 
 
    
 
    
 
    win.addEventListener('scroll', function(event) { 
 
    for(var i = 0; i < dots.length; ++i) { 
 
     var element = doc.elementFromPoint(0, dotPositions[i]); 
 
     var section = null; 
 
     while(!section && element) { 
 
     section = sections.find(function(s) { return s === element }); 
 
     element = element.parentNode; 
 
     } 
 
     if(section) { 
 
     dots[i].classList.toggle(classes[0], section.classList.contains(classes[1])); 
 
     } 
 
    } 
 
    }); 
 
})(window, document);

section { 
 
    min-height: 400px; 
 
    background: white; 
 
} 
 

 
section.black { 
 
    background: black; 
 
} 
 

 
.menu { 
 
    position: fixed; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 10px; 
 
    z-index: 20; 
 
} 
 

 
.dot { 
 
    border-radius: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: black; 
 
    margin-bottom: 10px; 
 
} 
 

 
.dot.white { 
 
    background: white; 
 
} 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
}

<section></section> 
 
<section class="black"></section> 
 
<section></section> 
 
<section class="black"></section> 
 
<section></section> 
 
<section class="black"></section> 
 

 
<ul class="menu"> 
 
    <li class="dot"></li> 
 
    <li class="dot"></li> 
 
    <li class="dot"></li> 
 
    <li class="dot"></li> 
 
    <li class="dot"></li> 
 
    <li class="dot"></li> 
 
</ul>