Check out this cool pen...
http://codepen.io/jareko999/pen/bZXbWP
The jQuery code adds a .fixed class to the #header when it reaches or goes below 0, but doesn't remove it when back above 0. I'm new to JS and struggling to understand what's causing this issue. Any help would be appreciated. Thanks.
Here's the HTML:
<div class="content">
<div id="header"></div>
</div>
CSS for reference:
body {
overflow-x: hidden;
margin: 0;
}
#header {
width: 100%;
height: 80px;
background: blue;
z-index: 1;
}
.content {
position: absolute;
top: calc(100% - 80px);
width: 100%;
height: 200vh;
background: linear-gradient(to bottom, red, yellow);
}
.fixed {
position: fixed;
top: 0;
width: 100%;
background: blue;
}
Included jQuery snippet:
$(window).scroll(function() {
var top = $('#header').offset().top;
var headerTop = (top - $(window).scrollTop());
if (headerTop <= 0) {
$('#header').addClass('fixed');
} else {
$('#header').removeClass('fixed');
}
});