Here's a link to my test blog for reference
Thanks to TylerH, I've got the animation set for when I scroll down, but I'd like that animation to reverse when I scroll back up. I'm going to assume that I need an additional javascript function for that to work, so for the time being:
Here is the new CSS (with added .unfixed property):
sticknav {
background: #b50000;
height: 46px;
width: 1080px;
margin-right: 0px;
margin-left: 413px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
border-bottom: 4px solid #e50000;
webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.49);
box-shadow: 0 2px 6px rgba(0,0,0,0.49);
}
.fixed {
position:fixed;
animation: fill 333ms forwards ease-in-out;
-webkit-animation: fill 333ms forwards ease-in-out;
}
@keyframes fill {
from {margin-left: 413px; width: 1080px;}
to {margin-left: 0px; width: 100%;}
}
@-webkit-keyframes fill {
from {margin-left: 413px; width: 1080px;}
to {margin-left: 0px; width: 100%;}
}
.unfixed {
position:fixed;
animation: unfill 333ms ease-in-out;
-webkit-animation: unfill 333ms ease-in-out;
}
@keyframes unfill {
from {margin-left: 0px; width: 100%;}
to {{margin-left: 413px; width: 1080px;}
}
@-webkit-keyframes unfill {
from {margin-left: 0px; width: 100%;}
to {{margin-left: 413px; width: 1080px;}
}
Here is the Javascript that does with the sticky navigation:
<script type="text/javascript">
$(document).ready(function() {
var aboveHeight = 205;
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('fixed').next().css('padding-top','0');
}
});
});
</script>
I need to find a way to activate .unfixed once .fixed deactivates, but that sounds complicated. I'll need it to activate only after the user scrolls back up after .fixed activates. Yeah, that sounds complicated, any help would be appreciated. Hopefully there's an easier way. An example of what I want exactly can be found on Game Rebels.