web/_javascript/commons/topbar-title.js

/**
 * Top bar title auto change while scrolling up/down in mobile screens.
 */

$(function () {
    const titleSelector = "div.post>h1:first-of-type";
    const $pageTitle = $(titleSelector);
    const $topbarTitle = $("#topbar-title");

    if ($pageTitle.length === 0 /* on Home page */
        || $pageTitle.hasClass("dynamic-title")
        || $topbarTitle.is(":hidden")) {/* not in mobile views */
        return;
    }

    const defaultTitleText = $topbarTitle.text().trim();
    let pageTitleText = $pageTitle.text().trim();
    let hasScrolled = false;
    let lastScrollTop = 0;

    if ($("#page-category").length || $("#page-tag").length) {
        /* The title in Category or Tag page will be "<title> <count_of_posts>" */
        if (/\s/.test(pageTitleText)) {
            pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
        }
    }

    // When the page is scrolled down and then refreshed, the topbar title needs to be initialized
    if ($pageTitle.offset().top < $(window).scrollTop()) {
        $topbarTitle.text(pageTitleText);
    }

    let options = {
        rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
        threshold: [0, 1]
    };

    let observer = new IntersectionObserver((entries) => {
        if (!hasScrolled) {
            hasScrolled = true;
            return;
        }

        let curScrollTop = $(window).scrollTop();
        let isScrollDown = lastScrollTop < curScrollTop;
        lastScrollTop = curScrollTop;
        let heading = entries[0];

        if (isScrollDown) {
            if (heading.intersectionRatio === 0) {
                $topbarTitle.text(pageTitleText);
            }
        } else {
            if (heading.intersectionRatio === 1) {
                $topbarTitle.text(defaultTitleText);
            }
        }
    }, options);

    observer.observe(document.querySelector(titleSelector));

    /* Click title will scroll to top */
    $topbarTitle.on('click', function () {
        $("body,html").animate({scrollTop: 0}, 800);
    });

});