Skip to content

Instantly share code, notes, and snippets.

@thomaswilburn

thomaswilburn/index.html

Created July 19, 2015 16:08
Show Gist options
  • Save thomaswilburn/216fff9b3b691039119e to your computer and use it in GitHub Desktop.
Save thomaswilburn/216fff9b3b691039119e to your computer and use it in GitHub Desktop.
Download ZIP
Weekly JS Challenge #2
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Making progress...</title>
<style>
body {
width: 600px;
margin: auto;
max-width: 100%;
}
header.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
header.progress-bar .fill {
height: 10px;
position: absolute;
top: 0;
left: 0;
width: 0;
transition: width .1s ease-in-out;
background: magenta;
}
section { height: 400px; }
#intro { background-color: #CFF }
#first { background-color: #FCC }
#second { background-color: #CFC }
#third { background-color: #FFC }
#conclusion { background-color: #CCC }
</style>
</head>
<body>
<header class="progress-bar">
<div class="fill"></div>
</header>
<section id="intro"></section>
<section id="first"></section>
<section id="second"></section>
<section id="third"></section>
<section id="conclusion"></section>
<script>
// YOUR SCRIPT GOES HERE
</script>
</body>
</html>
@thomaswilburn
Copy link
Author

Scroll down for a solution in vanilla JS. This is, I think, actually easier to solve without jQuery, but that's just me.

...

...

...

...

...

...

...

var fill = document.querySelector(".progress-bar .fill");
window.addEventListener("scroll", function() {
  var percentage = window.scrollY / (document.body.offsetHeight - window.innerHeight);
  fill.style.width = percentage * 100 + "%";
});

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