Как скрыть липкий заголовок, когда он собирается прокрутить в нижний колонтитул, а затем спрятаться при выходе из нижнего колонтитула? Использование Zepto, API IntersectionObserver - PullRequest
Новая
       30

Как скрыть липкий заголовок, когда он собирается прокрутить в нижний колонтитул, а затем спрятаться при выходе из нижнего колонтитула? Использование Zepto, API IntersectionObserver

0 голосов
/ 11 января 2019

У меня есть липкий заголовок с классом .details-header, который отображается только после того, как определенный раздел / div не виден. Я хочу, чтобы теперь видимый заголовок скрывался при прокрутке в нижний колонтитул и скрывался при выходе из нижнего колонтитула.

Я пытался использовать их, отличные от API Intersection Observer, но все еще пытаюсь использовать его: 

//   entry.boundingClientRect
//   entry.intersectionRatio
//   entry.intersectionRect
//   entry.isIntersecting

До сих пор, чтобы показать заголовок, я использовал intersectionRatio, и я также могу скрыть заголовок, когда он собирается прокрутить заголовок, используя его. Моя главная проблема в том, что я не могу снова отобразить заголовок после того, как он покидает нижний колонтитул. 

const stickyMenu = $(".details-header");

const ctaArea = $(".details-box .specs").get(0);
const footerArea = $("footer").get(0);

const ctaObserver = new IntersectionObserver(areaCallback);
const footerObserver = new IntersectionObserver(areaCallback, {
    threshold: 1,
});

function areaCallback(entries) {
    entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
            stickyMenu.addClass("hide");
            stickyMenu.removeClass("sticky");
        } else {
            stickyMenu.removeClass("hide");
            stickyMenu.addClass("sticky");
        }
    });
}

ctaObserver.observe();
footerObserver.observe();

Нужно, чтобы заголовок снова появлялся при прокрутке из нижнего колонтитула. Только начал использовать API Intersection Observer вчера, и это требование. Благодарю. Я ценю любую помощь.

...