고정 콘텐츠 스크롤 레이아웃

Question

아래 사이트는 각 섹션에서 고정 된 배경 이미지를 사용하지만 각 섹션에 고정 된 콘텐츠 (텍스트, 이미지)를 추가하고 동일한 스크롤 효과를 유지하려면 어떻게해야합니까?

http://jsfiddle.net/w919y0gb/

내 시도 :

#wrapper { 
    position: relative; 
    height: 500px; 
    width: 500px; 
    overflow: scroll; 
} 
.section { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 
.content { 
    position: fixed; 
} 

#s1 { 
    background-color: #f00; 
} 
#s2 { 
    background-color: #0f0; 
} 
#s3 { 
    background-color: #00f; 
} 
#s1 .content { 
} 
#s2 .content { 
    margin-top: -400px; 
} 
#s3 .content { 
    margin-top: -800px; 
} 

<div id="wrapper"> 

    <div class="section" id="s1"> 
     <div class="content">hello1</div> 
    </div> 

    <div class="section" id="s2"> 
     <div class="content">hello2</div> 
    </div> 

    <div class="section" id="s3"> 
     <div class="content">hello3</div> 
    </div> 

</div> 

내가 원하는 무엇 :

http://tympanus.net/Blueprints/ScrollingLayout/

내가 원하는 무엇의 더 나은 아이디어를 얻을 내 예에서보세요 첫 번째 섹션 (빨간색)은 "hello1"만 표시해야합니다.

01 23,516,

제 (녹색) 만 "hello2"

번째 (청색) 만 "hello3"

Answer 1

즉, 기준 위치가 단순히과 같이 fixed에 background-image 세트를 사용한다 :

FIDDLE

업데이트

알았습니다. 당신은 JQuery와 및 $(window).scroll() 기능 같은 것을 할 필요가있을 것이다 : positon: fixed를 사용

NEW FIDDLE

단지 문서의 흐름에서 요소를 분해하고 당신이 필요하므로이 부모에 포함 할 수 없다 absolute을 사용하고 scrollTop을 기준으로 배치하여 고정 모양으로 만듭니다.

Answer 2

이와 비슷한 부분 은요? 해키 작은, 그러나 않습니다 트릭 당신이 설정 한 경우 섹션 높이 :

$(document).ready(function(){ 
    $('.div3').hide(); 
    $('.div2').hide(); 
    $('.div1').show(); 
    $('#wrapper').scroll(function(){ 
     console.log($('#wrapper').scrollTop()); 
     if($('#wrapper').scrollTop() > 945){ 
      $('.div3').show(); 
      $('.div2').hide(); 
      $('.div1').hide(); 
     } 
     else if ($('#wrapper').scrollTop() > 465) { 
      $('.div3').hide(); 
      $('.div2').show(); 
      $('.div1').hide(); 
     } 
     else { 
      $('.div3').hide(); 
      $('.div2').hide(); 
      $('.div1').show(); 
     } 
    }); 
}); 

업데이트 바이올린이와 http://jsfiddle.net/w919y0gb/3/

은 또한에있을 "hello1/hello2/hello3"의 위치를 ​​수정할 수 있습니다 다른 장소가 아닌 같은 위치. 또는 스크롤 위치에 따라 hello1/hello2/hello3의 텍스트를 수정/대체하는 div를 하나만 가질 수 있습니다. 이 도움이되기를 바랍니다!

Answer 3

웹 페이지의 높이를 설정 한 다음 위 또는 아래로 스크롤 할 때 div를 표시 할 수도 있습니다. Heres는 작동 예 : http://jsfiddle.net/ZyKar/1738/ 당신이 픽셀의 일정 금액을 스크롤 한 후

$(document).scroll(function() { 
     var y = $(this).scrollTop(); 
     if (y > 0 && y < 400) { 
      $('#s1').fadeIn(); 
      $('#s3').fadeOut(); 
      $('#s2').fadeOut(); 
     } else if (y > 400 && y < 800) { 
      $('#s1').fadeOut(); 
      $('#s2').fadeIn(); 
      $('#s3').fadeOut(); 
     }else if (y > 800) { 
      $('#s3').fadeIn(); 
      $('#s2').fadeOut(); 
     } 

    }); 

, div의이 나타 서로를 대체하기 시작합니다.

바이올린에 표시된 것처럼 신체의 높이를 css로 설정하여 y의 값을 변경할 수 있습니다. 그런 다음 jQuery의 픽셀 조건을 원하는대로 설정할 수 있습니다.