디스플레이 I 페이지를 스크롤 다운 계속 jQuery를

Question

전반적 개념

를 사용 scrollTop 위치에 기초한 DIV 다른 div에의 CSS display 속성 스크롤 거리에 따라 none에서 block 변경됩니다. 내가 성취하는 데 어려움을 겪고있는 것과 비슷한 예가 here입니다. 사용자가 스크롤하면 지갑이 "회전"하여 이미지가 실제로 변경됩니다. 또 다른 예로는 here입니다.

디자인 이론

1. 얻을 scrollTop() 수에 도달 할 때, display:none에서 display:block에 사업부의 CSS 속성을 변경됩니다;
2. 다른 이미지가 포함 된 다른 div의 ID를 가져옵니다.
3. 각 특정 이미지를 특정 scrollTop() 번호로 설정합니다. 도달하면 디스플레이 설정이 켜집니다.

내가 알 수있는 한, 이것이 어떻게 완료되었는지 (나는 의사가 아니기 때문에 누가 알겠습니까)입니다.

A Fiddle

jQuery를

$(document).ready(function() { 
    function setImage(anImage, contentArea){ 
     $.when(contentArea == $(window).scrollTop()).then(function(){ 
      $(anImage).css('display', 'block'); 
     }); 
    } 
    setImage('#bg1', 200); 
    setImage('#bg2', 300); 
    setImage('#bg3', 400); 
}); 

이 코드 뒤에 내 생각이었다

이 anImage (존경 DIV 포함하는 이미지)의 scrollTop() 값이 contentArea (scrollTop에 해당하는 경우 () 값이 표시가 없음에서 블록으로 변경 될 때의 값으로 설정된 경우), anImage의 CSS 값이 display:block으로 변경됩니다. 새로운 이미지는 더 높은 z- 인덱스를 가지고 있기 때문에 나는 이전 이미지를 삭제하는 것에 대해 걱정하지 않습니다.

HTML

<div id="content"> 
    <div id="bg1"></div> 
    <div id="bg2"></div> 
    <div id="bg3"></div> 
</div> 

CSS

html,body{height:100%;margin:0;}   
#content{ 
    background:#333333; 
    height:1500px; 
    z-index:1; 
} 
#bg1{ 
    background:blue; 
    height:400px; 
    width:100%; 
    z-index:2; 
    position:fixed; 
    top:200px; 
    display:none; 
} 
#bg2{ 
    background:green; 
    height:400px; 
    width:100%; 
    z-index:3; 
    position:fixed; 
    top:400px; 
    display:none; 
} 
#bg3{ 
    background:red; 
    height:400px; 
    width:100%; 
    z-index:4; 
    position:fixed; 
    top:400px; 
    display:none; 
} 

Answer 1

그래서이 바이올린을 살펴 : http://jsfiddle.net/6XweD/2/.

당신은 함수가 $(this).height() 작동하도록 내가 opacity:0에 display:none에서 스타일을 변경 통지하고, 내가 된 div의 top 위치에 대한 몇 가지 adjusment을 한 경우.

희망 사항 :