開始滾動時淡化div

Question

當我開始滾動標題時，它會改變標題的高度並刪除徽標。我想要做的是讓徽標淡出，而不是消失。我怎樣才能達到這個效果？

出於測試目的，我無法在jsfiddle中顯示我的徽標，因爲它是自定義字體，所以我將使用#mainlogo作爲示例。這裏是我的代碼http://jsfiddle.net/Bx4rq/9/

JS

$(window).scroll(function() { 
     if ($(this).scrollTop() > 30){ 
    $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').addClass("sticky"); 
     } 
     else{ 
    $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').removeClass("sticky"); 
} 
}); 

CSS

#headerWrapper.sticky { height: 48px; } 
.icon-lkbl.sticky, #mainLogo.sticky { display:none;} 
.nav-collapse.sticky{ margin-top:-10px;} 

HTML

<div id="headerWrapper"> 
     <header> 
       <a href="#" rel="home"> 
        <div class="iconMain icon-lkbl"></div> 
        <h1 id="mainLogo">Logo <strong>Test</strong></h1> 
       </a> 
    <nav id="mainNav" class="nav-collapse"> 
     <ul> 
       <li><a href="about.html">About</a></li> 
       <li><a href="recipes.html">Recipes</a></li> 
       <li><a href="garden.html">Garden</a></li> 
       <li><a href="contact.html">Contact</a></li> 
       <li><a href="#" rel="popuprel" class="iconMain icon-search search popup">  <span>Search</span></a></li> 
     </ul> 
    </nav> 
    <div class="popupbox" id="popuprel"> 
     <div id="searchPanel"> 
       <h2><span>Find your</span> next meal</h2> 
     </div> 
    </div> 
    <div id="fade"></div> 
    </header> 
    </div> <!-- END HEADER WRAPPER --> 

Answer 1

而不是顯示和使用顯示隱藏的：無;

你可以使用jquerys，fadein和fadeout。

$(window).scroll(function() { 
    if ($(this).scrollTop() > 30) { 
     $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').addClass("sticky"); 
     $('.icon-lkbl, #mainLogo').fadeOut(); 
    } 
    else { 
     $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').removeClass("sticky"); 
     $('.icon-lkbl, #mainLogo').fadeIn(); 
    } 
}); 

fadein documentation