Сценарий, чтобы остановить фиксированный div от прокрутки под другим div?

Question

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

У меня есть страница набор мета-данных в фиксированное позиционирование, но как прокручивать, то ДИВ не останавливается и прокручивается под иконками в нижней части страницы. Я исследовал другие сценарии, но все они созданы, чтобы остановить 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); 

Дайте мне знать, если это работает или нет, я быстро сместил это вместе.