I have a problem with animating a fixed header to change from large to small but leaves a vapour trail behind
<script>
$(function(){
$('#fixed').data('size','big');
$('#logo').data('size','big');
$('#navigation').data('size','big');
$('#top').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#fixed').data('size') == 'big')
{
$('#fixed').data('size','small');
$('#fixed').stop().animate({
backgroundColor: "#FF4200",
height:'70px',
scrollTop:0
},"fast", 'linear');
}
if($('#logo').data('size') == 'big')
{
$('#logo').data('size','small');
$('#logo').stop().animate({
height:'54.54px',
width:'100px',
backgroundImage: "url()", //linked removed for privacy reasons
marginTop:'-30px'
},"fast", 'linear');
}
if($('#navigation').data('size') == 'big')
{
$('#navigation').data('size','small');
$('#navigation').stop().animate({
marginTop:'47px'
},"fast", 'linear');
}
if($('#top').data('size') == 'big')
{
$('#top').data('size','small');
$('#top').stop().hide();
}
}
else
{
if($('#fixed').data('size') == 'small')
{
$('#fixed').data('size','big');
$('#fixed').stop().animate({
backgroundColor: "#ffffff",
height:'150px',
scrollTop:0
},"fast", 'linear');
}
if($('#logo').data('size') == 'small')
{
$('#logo').data('size','big');
$('#logo').stop().animate({
height:'100%',
width:'100%',
marginTop:'0px'
},"fast", 'linear');
}
if($('#navigation').data('size') == 'small')
{
$('#navigation').data('size','big');
$('#navigation').stop().animate({
marginTop:'127px'
},"fast", 'linear');
if($('#top').data('size') == 'small')
{
$('#top').data('size','big');
$('#top').stop().show();
}
}
}
});
</script>
Screenshots available:
Normal view: http://dvelopit.co.nz/normal.PNG
Transition view: http://dvelopit.co.nz/normal-transition.PNG
Whats happening when scrolling to fast: http://dvelopit.co.nz/broken.PNG
Any help would be appreciated.
