const heightToAnimate = 100;
const css = {
    opacity: {
        padding: "28px 0px",
        backgroundColor: "rgba(0, 0, 0, 0.25)",
        color: window.innerWidth >= 768 ? "#FFFFFF" : "#000000",
    },
    white: {
        padding: "18px 0px",
        backgroundColor: "#FFFFFF",
        color: "#000000",
    },
};
const scrollToAnimationNavbar = (element) => {
    if (window.scrollY < heightToAnimate) {
        element.css(css.opacity);
    } else {
        element.css(css.white);
    }
};

// event
window.addEventListener("load", () => {
    scrollToAnimationNavbar($("#headerNavbar"));
});
window.addEventListener("scroll", () => {
    if (typeof $ !== "undefined" && $("#headerNavbar").length) {
        scrollToAnimationNavbar($("#headerNavbar"));
    }
});
