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

是否可以检测div是否被position:fixed中的另一个悬停？
我的情况是这样的：我有一个包含两个链接的标题，位置固定。滚动时，我想检测这个或其他div是否徘徊（在本例中，这些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检测亮度，但它是过时的，而不是非常有什么我要找的，但这个想法是有点相同。

来源

2016-01-20 flks

这将是很好的分享捣鼓这个 – abeyaz

@ardabeyazoglu：我编辑我的职务了的jsfiddle但没有按JS不工作...但实际上我只是寻找检测标题链接悬停在蓝色区域，然后添加一个类到动画徽标的动画 – flks

是否需要纯JavaScript，或者你可以使用JQuery？ – digglemister

这可能会帮助你（它的工作原理上的小提琴）：

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

来源

2016-01-21 09:22:50 abeyaz

嗯，它似乎没有工作，即使在小提琴或我的本地网站上。当在蓝色区域滚动时，我没有添加“可见”类 – flks

当我将这些代码放到你的小提琴的js部分并运行时，它可以工作。我再次尝试，当我滚动蓝色区域时，标题变为红色，并显示为“可见”css类。 – abeyaz

哈，你是对的，但它只适用于Chrome，我使用Firefox，所以我没有看到它。否则，当离开蓝色区域时，徽标不会回到蓝色，这是我正在寻找的目标。 – flks

我的检测似乎正在处理这种情况！（很难找到...哈哈）

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

来源

2016-01-21 12:01:38 flks

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

回答

相关问题