Skip to content

Instantly share code, notes, and snippets.

@nickrobinson

nickrobinson/sticky_banner.css

Last active September 23, 2020 19:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nickrobinson/83f86ab3b5d0c4724eb26a2ba7f87045 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nickrobinson/83f86ab3b5d0c4724eb26a2ba7f87045 to your computer and use it in GitHub Desktop.
Download ZIP
stickyBanner
Raw
sticky_banner.css
/* Style the header */
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 102px;
}
Raw
sticky_banner.js
window.addEventListener("load", pageFullyLoaded, false);
function pageFullyLoaded() {
console.log("LOADED");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment