While I am aware that CSS3 animations do not function properly in IE9 and below, I have managed to create a transition effect for a header that becomes fixed and shrinks in modern browsers with the following CSS:
/** This triggers when the viewport is scrolled down past 60px **/
.fm-container.small .branding {width:120px;transition: all 0.2s ease;}
.fm-container.small ul.prim-nav {margin-top:8px;transition: all 0.2s ease;}
.fm-container.small .prim-nav li ul a {font-size:100%;}
.fm-container.small .navicon:after {top:15px;transition: all 0.2s ease;}
.fm-container.small .highlight {opacity:0;}
/** This triggers when the viewport is at 0px from the top **/
.fm-container.large .branding {width:200px;transition: all 0.2s ease;}
.fm-container.large ul.prim-nav {margin-top:30px;transition: all 0.2s ease;}
.fm-container.large .prim-nav li ul a {font-size:100%;}
Additionally, here is the jQuery code involved:
// Function for scrolling header
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// Apply class to animate size changes while scrolling
if($(document).scrollTop()>60){
$(".fm-container").removeClass("large").addClass("small");
} else{
$(".fm-container").removeClass("small").addClass("large");
}
});
My query revolves around making this animation work smoothly on all browsers, both old and modern, especially considering its limitations in IE9. Any guidance on improving this using jQuery would be highly appreciated.
I have attempted to modify it like so:
// Function for scrolling header
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// Apply class for animating size changes while scrolling
if($(document).scrollTop()>60){
$(".fm-container").removeClass("large").addClass("small");
$(".fm-container.small").animate({width:"120px"});
$(".fm-container.small ul.prim-nav").animate({marginTop:"8px"});
$(".fm-container.small .navicon:after").animate({top:"15px"});
$(".fm-container.small .highlight").animate({opacity:"0"});
} else{
$(".fm-container").removeClass("small").addClass("large");
$(".fm-container.small").animate({width:"200px"});
$(".fm-container.small ul.prim-nav").animate({marginTop:"30px"});
$(".fm-container.small .navicon:after").animate({top:"12px"});
$(".fm-container.small .highlight").animate({opacity:"1"});
}
});
However, this version does not revert back smoothly when scrolling to the top, and it feels quite rudimentary given my limited skills. I am eager to learn how to implement this correctly, so any assistance will be valued greatly.
Your support on this matter would be truly appreciated.