Question

是否可以检测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检测到亮度，但它已经过时，并不是我想要的，但这个想法有点相同。

Answer 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");
  }
};

Answer 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();
}

检测固定的div是否在特定div上滚动

2 个答案: