javascript - 检测固定位置的 div 是否在特定的 div 上滚动

Question

是否可以检测position:fixed中的div是否被另一个悬停？
我的情况是这样的:我有一个标题，其中两个链接位于固定位置。滚动时，我想检测这个或那个其他 div 是否悬停(在本例中，那些 div 是蓝色的)，以运行由类更改触发的动画。

这是我的代码，但只从顶部开始工作，然后它不会回到“正常”状态。

var header_links = document.getElementById("headerlinks"),
    blue_area = document.getElementsByClassName("blue_area");

// Detect on scroll
window.onscroll = function(e){
    if (e.pageY >= blue_area.offsetTop){
        header_links.classList.add("visible");
    }
    else {
        header_links.classList.remove("visible");
    }
};

(不那么有效)这里是 JSFiddle:
— https://jsfiddle.net/1bws8o3d/

不知何故this plugin检测亮度，但它已经过时并且不是我正在寻找的东西，但这个想法有点相同。

Answer 1

这可能对您有所帮助(它适用于 fiddle ):

编辑:添加了 firefox 支持。

var header_links = document.getElementById("headerlinks"),
blue_area = document.getElementsByClassName("blue_area")[0];

// Detect on scroll
window.onscroll = function(e){
  var startPos = ((e.pageY||document.body.scrollTop) + header_links.offsetHeight);
  var endPos = blue_area.offsetTop + blue_area.offsetHeight; 

  if(blue_area.offsetTop <= startPos && startPos <= endPos){
    header_links.classList.add("visible");
  }else{
    header_links.classList.remove("visible");
  }
};