스크롤 후 헤더 높이 줄이기

Question

약 180px의 꽤 큰 헤더가있는 웹 페이지에서 작업하고 있습니다. 더 나은 사용자 경험을 위해 사용자가 스크롤을 시작하면 헤더 크기를 약 100px로 줄이기 위해 모든 것이 원활하게 진행되고 있지만 로고 크기를 줄이기 위해 로고를 가져올 수 없습니다. 헤더를 잘 만들거나 적어도 배경 크기, 아이디어는 없습니까?

http://jsfiddle.net/KQGyu/4/

코드는 다음과 같이 -

<script> 
$(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:'100px' 
     },600); 
    } 
} 
else 
{ 
    if($('#header').data('size') == 'small') 
    { 
     $('#header').data('size','big'); 
     $('#header').stop().animate({ 
      height:'180px' 
     },600); 
    } 
} 
});$(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:'100px' 
     },600); 
    } 
} 
else 
{ 
    if($('#header').data('size') == 'small') 
    { 
     $('#header').data('size','big'); 
     $('#header').stop().animate({ 
      height:'180px' 
     },600); 
    } 
} 
}); 
</script> 










<script> 
$(function(){ 
$('#logo').data('size','big'); 
}); 

$(window).scroll(function(){ 
if($(document).scrollTop() > 0) 
{ 
    if($('#logo').data('size') == 'big') 
    { 
     $('#logo').data('size','small'); 
     $('#logo').stop().animate({ 
      width:'59px',height:'63px' 
     },600); 
    } 
} 
else 
{ 
    if($('#logo').data('size') == 'small') 
    { 
     $('#logo').data('size','big'); 
     $('#logo').stop().animate({ 
      width:'128px',height:'120px' 
     },600); 
    } 
} 
});$(function(){ 
$('#logo').data('size','big'); 
}); 

$(window).scroll(function(){ 
if($(document).scrollTop() > 0) 
{ 
    if($('#logo').data('size') == 'big') 
    { 
     $('#logo').data('size','small'); 
     $('#logo').stop().animate({ 
      width:'59px',height:'63px' 
     },600); 
    } 
} 
else 
{ 
    if($('#logo').data('size') == 'small') 
    { 
     $('#logo').data('size','big'); 
     $('#logo').stop().animate({ 
      width:'128px',height:'120px' 
     },600); 
    } 
} 
}); 
</script> 

Answer 1

는 CSS가 모든 일을하자. 자바 스크립트에서 이와 같은 인코딩 애니메이션은 다양한 종류의 고통을 이끌 것입니다.

귀하의 JS이만큼 간단해야한다 :

$(window).scroll(function(){ 
    if($(document).scrollTop() > 0) { 
     $('#header').addClass('small'); 
    } else { 
     $('#header').removeClass('small'); 
    } 
}); 

그리고 당신의 CSS는 두 상태를 설정하고 어떻게 그들 사이의 전환 :

#header { 
    position: fixed; 
    top: 0; 
    background: #888; 
    color: white; 
    font-size: 30px; 
    height: 60px; 
    width: 100%; 

    transition: font-size 0.5s, height 0.5s; 
    -webkit-transition: font-size 0.5s, height 0.5s; 
    -moz-transition: font-size 0.5s, height 0.5s; 

} 

#header.small { 
    font-size: 15px; 
    height: 30px; 
} 

것은이 여기서 일 참조 : http://jsfiddle.net/VLD8G/

를

이제 #header.small 규칙을 통해 원하는 모든 것의 범위를 지정할 수 있습니다.

#header .logo { 
    width: 100px; 
    height: 100px; 
} 

#header.small logo { 
    width: 50px; 
    height: 50px; 
} 

또는 변경하려는 다른 것 예를 들면 다음과 같습니다. 그리고 그 아름다움은 JS가 전혀 바뀌지 않아도된다는 것입니다.