腳本阻止固定div在另一個div下滾動？

Question

https://rebecca-milazzo-test.squarespace.com/featured#/btr/

我將頁面元數據設置爲固定位置，但隨着用戶滾動，div不停止並滾動到頁面底部的縮略圖下。我研究了其他腳本，但它們都是爲了在某個像素高度停止div而不是另一個元素而創建的。

任何幫助，非常感謝。

Answer 1

您將要創建一個函數來檢查窗口滾動位置，以查看您是否滾動到縮略圖部分。當您滾動到縮略圖部分時，將固定元素位置設置爲絕對值，並將其頂部設置爲窗口滾動位置加上原始頂部值。對於那些認爲z-index可以滿足的人來說，OP不希望元素在縮略圖部分下方或縮略圖部分上滾動。

function checkposition(){ 
    fixedelement = document.querySelector(".project-meta"); 
    stopelement = document.querySelector("#project-thumbs"); 
    stoppoint = stopelement.scrollTop - fixedelement.clientHeight - parseInt(fixedelement.style.top); 
    if (window.scrollY >= stoppoint){ 
     fixedelement.style.position = "absolute"; 
     fixedelement.style.top = [defaulttophere] + window.scrollY + "px"; 
    } else { 
     fixedelement.style.position = "fixed"; 
     fixedelement.style.top = [defaulttophere]; 
    } 
} 

window.addEventListener("scroll", checkposition); 

讓我知道如果這工作與否，我很快就把它扔在一起。