Skip to main content

Scrolling emergency notification bar

Add to Advanced theme editor CSS 

.traction-emergency-notification {
    position: sticky;
    top: 0; /* Adjust this value as needed */
    z-index: 1000; /* Ensures it stays above other content */
}
 

Add to advanced theme editor scripts section 

document.addEventListener("DOMContentLoaded", function() {
    var notificationBar = document.querySelector(".traction-emergency-notification");
    var pageHeader = document.getElementById("page-header");
    var headerHeight = pageHeader.offsetHeight;

    // Set initial position to just below the header
    notificationBar.style.top = headerHeight + "px";
    notificationBar.style.position = "absolute";

    // Adjust the notification bar position on scroll
    window.addEventListener("scroll", function() {
        if (window.scrollY >= headerHeight) {
            // Fix notification bar to the top of the viewport when header is scrolled past
            notificationBar.style.position = "fixed";
            notificationBar.style.top = "0";
        } else {
            // Place notification bar just below the header when scrolled back to top
            notificationBar.style.position = "absolute";
            notificationBar.style.top = headerHeight + "px";
        }
    });
});