檢測固定位置的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上滾動

回答

相關問題