检测固定位置的 div 是否在特定 div 上滚动答案

【问题标题】：Detect if a fixed positioned div is scrolling over specific divs检测固定位置的 div 是否在特定 div 上滚动
【发布时间】：2016-01-21 20:48:09
【问题描述】：

是否可以检测 div 是否被position:fixed 中的另一个悬停？
我的情况是这样的：我有一个标题，其中两个链接位于固定位置。滚动时，我想检测这个或那个其他 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 检测亮度，但它已经过时并且不是我想要的，但想法有点相同。

【问题讨论】：

为此分享一个小提琴会很好
@ardabeyazoglu：我用 jsfiddle 编辑了我的帖子，但 JS 不起作用……但实际上我只是想检测悬停在蓝色区域的标题链接，然后将一个类添加到 div 以进行动画处理标志
是否需要纯Javascript，或者可以使用JQuery？
@snookieordie：我尽量避免使用 jQuery，所以如果它可以是香草，那就太酷了！

标签： javascript scroll css-position

【解决方案1】：

这可能会对你有所帮助（它适用于小提琴）：

编辑：添加了 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");
  }
};

【讨论】：

嗯，它似乎不起作用，即使在小提琴或我的本地网站上也是如此。滚动蓝色区域时，我没有添加“可见”类
当我把这些代码放到你小提琴的 js 部分并运行时，它就可以工作了。我又试了一次，当我滚动到蓝色区域时，标题变为红色并带有“可见”css 类。
哈，你说得对，但它只适用于 Chrome，我使用的是 Firefox，所以我没有看到它。否则，离开蓝色区域时徽标不会变回蓝色，这就是我要实现的目标。
@flks 我编辑了跨浏览器兼容性的代码。
@flks 我也让它在离开蓝色区域时变回蓝色。

【解决方案2】：

我的检测似乎适用于这种情况！（好难找……哈哈）

if (e.pageY >= area.offsetTop - offset && e.pageY <= area.offsetTop + area.offsetHeight - 60){

完整代码：

var links = document.getElementById("headerlinks"),
    area = document.getElementById("blue_area"),
    offset = 150,
    logo = {
        animate: function(){ links.classList.add("over"); },
        stop: function(){ links.classList.remove("over"); }
    };

// Detect on scroll
// ON: If scroll position is after top of the area
// OFF: If scroll position is after end of the area
window.onscroll = function(e){
    if (e.pageY >= area.offsetTop - offset && e.pageY <= area.offsetTop + area.offsetHeight - 60){
        logo.animate();
    } else {
        logo.stop();
    }
};

// Detect on load
if ((window.pageYOffset || document.documentElement.scrollTop) >= area.offsetTop - offset){
    logo.animate();
}

【讨论】：