스크롤 할 때 애니메이션이있는 이미지 추가

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