Help Scout Docs Top Banner Custom CSS and JavaScript

help-scout-custom-code-top-banner-css.html

<!-- Winter 2004 Banner -->

    <style>
      body {
        margin-top: 113px !important;
      }
      #winter-2004-banner.hidden {
        top: -113px;
      }
      #winter-2004-banner {
        --baby-blue: #98d1d4;
        --black: #1a191b;
      }
      .winter-2004-banner {
        align-items: center;
        background-color: var(--baby-blue);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        left: 0;
        margin: 0;
        padding-bottom: 4%;
        position: fixed;
        width: 100vw;
        text-align: center;
        top: 0;
        z-index: 2;
      }
      #snowflake {
        display: none;
      }
      .winter-2004-banner-heading {
        color: var(--black);
        font-family: dela gothic one, Sans-serif;
        font-size: 5vw;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 0;
      }
      .winter-2004-banner-text {
        font-family: space grotesk, Sans-serif;
        font-size: 4vw;
        font-weight: 400;
        line-height: 1;
        word-wrap: break-word;
      }
      .winter-2004-banner-text p {
        margin-top: 0;
      }
      .winter-2004-banner-button {
        background-color: var(--black);
        border-radius: 3px;
        border-width: 0.12em;
        border-style: solid;
        color: white;
        padding: 0.5em 1em;
        text-align: center;
        width: fit-content;
      }
      .winter-2004-banner-button a {
        color: white;
        font-family: inter, Sans-serif;
        text-decoration: none;
      }
      @media screen and (min-width: 600px) {
        body {
          margin-top: 71px !important;
        }
        #winter-2004-banner.hidden {
          top: -72px;
        }

        .winter-2004-banner {
          flex-direction: row;
          padding: 0;
          text-align: left;
        }
        .winter-2004-banner-heading {
          font-size: 2rem;
        }
        .winter-2004-banner-text {
          font-size: 22px;
        }
        #snowflake {
          display: block;
          height: 80px;
        }
      }
    </style>

<!--  END Winter 2004 Banner -->

help-scout-custom-code-top-banner-javascript.html

<script>
      // Generate the Winter 2003/2004 Sale Banner
      document.addEventListener("DOMContentLoaded", function() {        
        // Create bannerDiv to hold all the contents of the banner
        const bannerDiv = document.createElement("div");
        bannerDiv.id = "winter-2004-banner";
        bannerDiv.className = "winter-2004-banner";

        // Add column 1 content to bannerDiv
        const divCol1 = document.createElement("div");
        divCol1.id = "column-1";
        const divHeading = document.createElement("h2");
        divHeading.className = "winter-2004-banner-heading";
        divHeading.textContent = "WINTER SAVINGS Start Now!";
        divCol1.appendChild(divHeading);
        const divParagraph = document.createElement("p");
        divParagraph.className = "winter-2004-banner-text";
        divParagraph.textContent =
          "50% off any bundle. Take advantage while it lasts!";
        divCol1.appendChild(divParagraph);
        bannerDiv.appendChild(divCol1);

        // Add column 2 content to bannerDiv
        const divCol2 = document.createElement("div");
        divCol2.id = "column-2";
        const divButton = document.createElement("div");
        divButton.className = "winter-2004-banner-button";
        const divLink = document.createElement("a");
        divLink.href = "https://mysupercoolsite.site/2024-winter-sale";
        divLink.textContent = "Get 50% Off Now!";
        divButton.appendChild(divLink);
        divCol2.appendChild(divButton);
        bannerDiv.appendChild(divCol2);
        document.body.insertBefore(bannerDiv, document.body.firstChild);
      });

    // Since we're "fixing" this banner to the top, let's be polite and show it only when people are at the top of the page. 
    window.addEventListener('scroll', function() {
      const bannerDiv = document.querySelector("#winter-2004-banner");
       let currentScrollTop = document.documentElement.scrollTop || window.pageYOffset;

       if (currentScrollTop === 0) {
        // Show
        bannerDiv.style.display = 'flex';
      } else {
        // Hide
        bannerDiv.style.display = 'none';
      }

    });
</script>

Note: The JavaScript code for the banner does not use document.write().

https://developer.mozilla.org/en-US/docs/Web/API/Document/write