javascript - 检测元素是否悬停在部分上

Question

我在网站上有侧点导航 - 标准 position: fixed 点导航。现在我在同一个网站上也有两种类型的部分和两种类型的背景——让我们假设一个是白色的，另一个是黑色的。我的问题是，当导航悬停在黑色部分时，点不可见。所以我尝试编写脚本来检测部分是否具有特定类以及该部分上是否有特定点 - 如果是，则点的颜色会更改。我取得了一定的成功，但完成后我意识到我的脚本只能以一种方式工作(从上到下滚动)，即使我检测到从下到上滚动，当我在网站中间改变方向时它也无法正常工作。我已经在这上面花费了很长一段时间，但我一无所知——这是我到目前为止的代码——当你从上到下滚动时，它就可以工作了。

您是否有任何其他建议或一些图书馆来解决这个问题？

编辑:布局非常艺术 - 所以有一些盒子从左或右动态 float ，当盒子在那里时点也必须改变，这就是为什么我拼接我的数组并按下 #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

如评论中所述，我将使用 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>