Skip to content

Instantly share code, notes, and snippets.

@17twenty

17twenty/basic.css

Created July 31, 2021 04:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 17twenty/e0bcdde8bdc61f3fdf65114d352491aa to your computer and use it in GitHub Desktop.
Save 17twenty/e0bcdde8bdc61f3fdf65114d352491aa to your computer and use it in GitHub Desktop.
Download ZIP
Make your navbar change color on scroll
Raw
basic.css
.nav {
transition-duration: 1s;
}
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Navbar Scroll</title>
<meta name="description" content="A simple demo of having a scrollbar change colour on scroll.">
<meta name="author" content="Nick Glynn">
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:url" content="https://curiola.com/>
<meta property="og:description" content="A simple demo of having a scrollbar change colour on scroll.">
<meta property="og:image" content="image.png">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script language="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var scrollStart = 0;
var nav = document.querySelector(".nav");
var offset = navbarElement.getBoundingClientRect();
document.onscroll = function (e) {
scrollStart = e.target.scrollingElement.scrollTop;
if (scrollStart > offset.top) {
nav.style.background-color, rgba(34,34,34,0.9);
} else {
nav.style.background-color = "transparent";
}
};
});
</script>
</head>
<body>
<header class="nav">
<a class="logo" href="#">Logo</a>
<nav class="primary-nav">
<ul>
<li><a href="#">Primary nav</a></li>
<li><a href="#">Primary nav</a></li>
<li><a href="#">Primary nav</a></li>
</ul>
</nav>
</header>
<section>
<!-- lots of stuff here -->
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment