Skip to content

Instantly share code, notes, and snippets.

@marklchaves
Last active March 28, 2024 09:19
Show Gist options
  • Save marklchaves/32f30a08fee426992d4deff93aa3be7b to your computer and use it in GitHub Desktop.
Save marklchaves/32f30a08fee426992d4deff93aa3be7b to your computer and use it in GitHub Desktop.
Help Scout Docs Top Banner Custom CSS and JavaScript
<!-- 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 -->
<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>
@marklchaves
Copy link
Author

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment