在向下滾動或向上滾動時重新調整大小的徽標 - jQuery

Question

我需要一些簡單的代碼示例來重新調整徽標的大小，以便像向下滾動時放大30px 30px，並且向上滾動或使刷新頁面恢復爲原始大小例如60px的60，有些效果就像淡入淡出。

感謝

Answer 1

下面是一個例子，FIDDLE

<header> 
    <img src="http://precision-software.com/wp-content/uploads/2014/04/jQurery.gif" class="logo"> 
</header> 

---

header { 
    background: violet; 
    position: fixed; 
    width: 100%; 
    height: 80px; 
} 
.logo { 
    margin: 10px 20px; 
    width: 60px; 
    height: 60px; 
} 

---

(function($) { 
    $(window).scroll(function() { 
    if($(this).scrollTop() > 0) { 
     $('header').stop().animate({ height: '50px' }, 400, 'linear'); 
     $('.logo').stop().animate({ width: '30px', height: '30px' }, 400, 'linear'); 
    } 
    else { 
     $('header').stop().animate({ height: '80px' }, 400, 'linear'); 
     $('.logo').stop().animate({ width: '60px', height: '60px' }, 400, 'linear'); 
    } 
    }); 
})(jQuery); 

Answer 2

我猜你想要的東西像Demo

您可以通過使用一個jQuery LIK做到這一點

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 10){ 
    // x should be from where you want this to happen from top// 
    //make CSS changes here 

    $('.header').addClass("test"); 
     $('.logo').addClass("test"); 
    } 
    else{ 
    //back to default styles 
    $('.header').removeClass("test"); 
     $('.logo').removeClass("test"); 
    } 
}); 

HTML

<header class="header"> 
    <img class="logo" src="http://www.skrenta.com/images/stackoverflow.jpg" /> 
</header> 

CSS

* { margin: 0; padding: 0; } 

body { 
    height: 2000px; 
} 

.header { 
    width: 100%; 
    height: 60px; 
    background: red; 
    position: relative; 

    -webkit-transition: linear .3s; 
    -moz-transition: linear .3s; 
     -ms-transition: linear .3s; 
     -o-transition: linear .3s; 
      transition: linear .3s; 
} 

.logo { 
    height:60px;  
    width:auto; 
    position: relative; 

} 

.test { 
    height: 30px; 
    position: fixed; 
}