i am quite new here and searching for help! Im trying to have a larger header while the site is scrolled to the top AND when there is mouseover.
The first part of the code is copied by a blog, the second part is written by me and it doesn t work out at all!
$(function(){
$('#header').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header').data('size') == 'big')
{
$('#header').data('size','small');
$('#header').stop().animate({
height:'40px'
},600);
}
}
else
{
if($('#header').data('size') == 'small')
{
$('#header').data('size','big');
$('#header').stop().animate({
height:'60px'
},600);
}
}
});
$('#header').children().hover(function(event){
if(event.type == 'mouseover')
{
if($('#header').data('size') == 'big')
{
$('#header').data('size','small');
$('#header').stop().animate({
height:'40px'
},600);
}
}
else
{
if($('#header').data('size') == 'small')
{
$('#header').data('size','big');
$('#header').stop().animate({
height:'60px'
},600);
}
}
});