Using a blogger website, I have successfully set up sticky navigation. However, when scrolling back up, the navigation bar pops back into place without any animation. I am looking for a solution to smoothly return the navigation bar to its original position and size. You can see the issue on my test blog. The animation works when scrolling down but not when scrolling up.
I cannot create a JSFiddle for this as the template I'm using is complex. But I believe adding a Javascript code could fix the problem. It would need to be integrated into the existing code that activates the sticky navigation.
Below is the CSS used for the fixed navigation bar as well as a property to reverse the animation. I just need help implementing it correctly in the Javascript code.
sticknav {
background: #b50000;
height: 46px;
width: 1080px;
margin-right: 0px;
margin-left: 413px;
left: 0px;
right: 0px;
position: relative;
z-index: 1;
border-top: 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 forwards 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 code:
$(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');
}
});
});
A slightly modified version of the code partially works. When scrolling, the bar gets fixed to the top, expands at 205 pixels down, and retracts when scrolling back up. However, it remains fixed in place. I want it to return to its original position after retracting.
$(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');
}
});
$(window).scroll(function(){
if ($(window).scrollTop() < aboveHeight){
$('sticknav').addClass('unfixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('unfixed').next().css('padding-top','0');
}
});
});