Bricks: Jak vytvořit fixní (sticky) menu při scrollu?

Bricks builder má tu výhodu, že v template pro header jde v settinngs nastavit fixní header, čili žádný stres, je to jednoduché. Co ale dělat, když nad menu je ještě nějaká informativní lišta? U jednoho klienta tam máme například kontakty, sociální sítě aj. Když tedy nastavím celý header jako fixed, tak se se scrollem zobrazuje i lišta, což zbytečna zabírá moc místa. Jak to tedy řešit?

Osobně jsem to vyřešil pomocí JS kódu. Dané sekci, která má být fixnuta, jsem přiřadil class .ap-sticky-menu. Následně jsem do snippetů vložil tento kód, který při scrollu k této class přidá ještě navíc .sticky.

document.addEventListener("DOMContentLoaded", function () {
    const stickyMenu = document.querySelector(".ap-sticky-menu");

    if (!stickyMenu) return;

    const offset = stickyMenu.offsetTop;

    window.addEventListener("scroll", function () {
        if (window.scrollY >= offset) {
            stickyMenu.classList.add("sticky");
        } else {
            stickyMenu.classList.remove("sticky");
        }
    });
});

Následně stačí přidat tyto css.

.ap-sticky-menu {
    width: 100%;
    z-index: 9999;
    transition: top 0.2s ease-in-out;
}

.ap-sticky-menu.sticky {
    position: fixed;
    top: 0;
}

.menu-placeholder {
    display: none; /* Skryté na začátku */
}

Dále je potřeba ještě přidat tento JS kód skrze „škubání“ při scrollu, kdy se menu přichytne k horní straně obrazovky.

window.addEventListener("DOMContentLoaded", function () {
    let menu = document.querySelector(".ap-sticky-menu");
    let placeholder = document.createElement("div");

    // Přidání placeholderu do DOM
    placeholder.classList.add("menu-placeholder");
    placeholder.style.height = menu.offsetHeight + "px"; // Nastaví výšku podle menu
    menu.parentNode.insertBefore(placeholder, menu);

    window.addEventListener("scroll", function () {
        if (window.scrollY > menu.offsetTop) {
            menu.classList.add("sticky");
            placeholder.style.display = "block"; // Zobrazíme placeholder
        } else {
            menu.classList.remove("sticky");
            placeholder.style.display = "none"; // Skryjeme placeholder
        }
    });
});