How do I get the animation for my sticky navbar to work both ways when scrolling?
Here's a link to my test blog for reference
Thanks to TylerH, I have an animation when I scroll down, but I would like this animation to change when I scroll back. I guess I need an extra javascript function to work, so for now:
Here's the new CSS (with the 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's the Javascript that does with 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 need it to only activate after the user scrolls through the backup after activating .fixed. Yes, it sounds complicated, any help would be appreciated. Hopefully there is an easier way. An example of what I want exactly can be found on Rebel Games .
source to share
There is a simple solution to your problem. In order to use animation
and save the end result and not after being reset upon completion, you need to apply animation-fill-mode
.
Move the animation to .fixed
instead .sticknav
(this will play the animation when .fixed
added on scrolling down, not on page load) and add animation-fill-mode
:
.fixed {
position: fixed;
animation: fill 11s linear;
animation-fill-mode: forwards;
}
I also highly recommend that you use external CSS files instead of placing all your CSS in tags <style>
.
source to share
Try this below code and use CSS property transition
instead animation
, which looks simpler thananimation
stickynav{
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);
transition:width 500ms; //Add this
}
.fixed {
position:fixed;
margin-left:0px;
width:100%;
top:0px;
}
You js
:
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight)
$('stickynav').addClass('fixed')
else
$('stickynav').removeClass('fixed')
});
source to share
Working solution
Try margin-left: 92px;
insteadmargin-left: 413px
sticknav {
background: #b50000;
height: 46px;
width: 1080px;
margin-right: 0px;
margin-left: 92px;
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);
animation-name: fill;
animation-duration: 12s;
}
Output
source to share