I encountered an issue where my code for the header to display only when scrolling up worked perfectly in jsfiddle or codepen, but failed when I tried it in my own program. It was puzzling because I copied and pasted the same code into both platforms and it worked fine there. I am perplexed as to what might be missing or where I could have made an error.
HTML
<body>
<header class="nav-down">
<h1>William Chen</h1>
</header>
<section class="module parallax parallax-1">
<div class="container">
<h1>Hi.</h1>
</div>
</section>
<section class="module content">
<div class="container">
<h2 class="about">Lorem Ipsum Dolor hello</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</section>
...
CSS
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
header {
background: #f5b335;
height: 80px;
position: fixed;
...
}
.container {
max-width: 960px;
margin: 0 auto;
}
...
@media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
}
JS
// Hide Header on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
...
P.S Make sure you verify your code by copying it multiple times between your documents and online platforms to ensure accuracy.