다른 div가 스크롤 된 경우 div에서 페이드하는 방법

Question

주제가 다 나와 있습니다.

한 페이지짜리 레이아웃에 불과합니다. 페이지의 첫 번째 섹션에는 div 내의 이미지가 표시됩니다. 로고가 표시된 영역 밖으로 스크롤 된 경우 로고 이미지가 더 작은 다른 div가 탐색 표시 줄에 나타나야합니다. 물론 큰 로고가 다시 스크롤되면 작은 로고가 사라져야합니다.

js에서이를 수행하는 방법은 무엇입니까?

Answer 1

아마도 이와 비슷한가요?

$(window).scroll(function() { 
     if ($('#element').visible(true)) { 
      // show big logo 
     } else { 
      // show small logo 
     } 
    }); 

Answer 2

자바 스크립트 :

// Document ready 
jQuery(document).ready(function(){ 

    // When window is resized 
    jQuery(window).bind("resize", function(){ 

     // If big logo does not fit in container 
     if (jQuery("#big").width() >= jQuery("#container").width()) { 

      // Big out, small in 
      jQuery("#big").fadeOut(function(){ 
       jQuery("#small").fadeIn(); 
      }); 

     // If big logo fits in container 
     } else { 

      // Small out, big in 
      jQuery("#small").fadeOut(function(){ 
       jQuery("#big").fadeIn(); 
      }); 

     } 

    }); 

}); 

HTML :

<div id="container"> 
    <img id="big" src="big.png" alt="big" /> 
    <img id="small" src="small.png" alt="small" style="display: none;" /> 
</div> 

Answer 3

이 전혀 jQuery를 웨이 포인트 봤어? http://imakewebthings.com/jquery-waypoints/

나는 끈적 메뉴 예제 http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/과 같은 작업을 수행하려고 노력하는 것이 필요에 맞게 변경하기 쉽습니다.