在滾動時添加帶有動畫的圖像

Question

我想問問這是否可能，以及您是否可以告訴我如何。這裏是我的東西： 我有一個logo3.png（大版本）的div和一個右側部分粘滯的導航欄。

http://jsfiddle.net/34Qw5/

<div id="logo_container"> 
<center><img src="images/Logo3.png" alt="My Company"/></center> 
</div> 
<div id="header_navi"> 
    <table width="50%" border="0"> 
     <tr> 
     <td><a href="#"><img class="home_navi" data-alt-src="images/home_over.png" src="images/home.png" /></a></td> 
     <td><a href="#"><img class="portfolio_navi" data-alt-src="images/portfolio_over.png" src="images/portfolio.png" /></a></td> 
     <td><a href="#"><img class="quote_navi" data-alt-src="images/get_a_quote_over.png" src="images/get_a_quote.png" /></a></td> 
     <td><a href="#"><img class="careers_navi" data-alt-src="images/careers_over.png" src="images/careers.png" /></a></td> 
     </tr> 
    </table> 
</div> 

當我向下滾動和導航欄達到它的頂部和大標識將被隱藏這是工作的罰款貼頂部。現在，我想要做的是當導航欄到達頂部時，我希望我的小徽標徽標（logo_small.png）被添加到導航欄左側。請幫助？

在此先感謝！

Answer 1

我可以看到你正在使用Sticky Plugin，但在那裏沒有回調，你可能不想惹惱它。我建議你放下插件，只用jQuery創建自己的粘性。

如果你只希望粘有一些頂級的間距您的導航欄（類似於此選項.sticky({topSpacing:10});）和顯示/隱藏的小標識，我想這會做：

var nav = $('#nav'); 
var smallLogo = $('#logo-small'); 
var navPos = nav.offset().top; 
var topSpacing = 10; 

$(document).scroll(function(){ 
    var scrollTop = $(this).scrollTop(); 

    if(scrollTop >= navPos){ 
     nav.css({'position':'fixed','top':topSpacing}); 
     smallLogo.fadeIn(500); 
    }else { 
     nav.css({'position':'static'}); 
     smallLogo.fadeOut(500); 
    } 
}); 

您可以檢查出這個小提琴也是如此。 jsfiddle