div를 다른 div 위로 스크롤

Question

divs를 화면 위로 스크롤하지 않고 서로 스크롤하도록하고 싶습니다.

두 div로 관리했지만 세 번째 div와 동일하게 처리 할 수 ​​없습니다.

나는 jsFiddle에 예를했다 : 처음 두 div에 대한

이

#one{ 
    width: 100%; 
    height: 800px; 
    position: fixed; 

    background: gold; 
} 

#two{ 
    width: 100%; 
    height: 800px; 
    top: 800px; 
    position: relative; 

    background: goldenrod; 
} 

#three{ 
    width: 100%; 
    height: 200px; 
    top: 800px; 
    position: relative; 

    background: darkgoldenrod; 
} 

하지만이 단지 작품 :이 작업을 수행 할 때 http://jsfiddle.net/gv8GU/ 그래서 그것을 작동합니다.

그래서 두 번째 div (#two)가 맨 위로 스크롤 한 다음 더 스크롤하면 두 번째 div가 세 번째 div (#three)를 스크롤하여 맨 위에 머물도록하고 싶습니다.

Answer 1

더플 대답에 대해 유감스럽게 생각합니다. "Parallax"태그를보고 흥분했습니다.

나는 당신이 원하는 것을 이해한다고 생각한다 - 기본적으로 각각의 "zone"이 맨 위에 올 때, 그곳에 래치가 걸리고 다음 구역은 맨 밑에서 잠식된다.

div의 위치가 맨 위에 오면 왼쪽으로 제로가되고 상단의 위치가 고정되어 있다고 생각합니다. 아마도 끈적 거리기를해야 할 때 "래치"클래스를 사용합니다.

내가 아는 한 CSS는 사용자가 원하는대로 할 수 없습니다. 스크롤 위치에 응답하는 방법이 필요하므로 자바 스크립트 솔루션입니다.

지금 코드를 작성할 시간이 없지만 div의 원래 위치를 저장하는 초기화 루틴이 필요합니다. 스크롤 위치가 변경되면 각 div의 원래 위치와 비교하여 div가 고정 대 흐름으로 표시되어야하는시기를 결정해야합니다.

div가 고정 될 때 공간을 차지하지 않기 때문에 몇 가지 방법이 필요합니다. 해당 높이의 제로 너비 div를 떠 다니고 내용 div 다음에 지워보십시오.

죄송하지만 더 이상 설명 드릴 수 없습니다.

P. http://jsfiddle.net/xtyus/1/

html로

<!-- 1. Items that are not in fixed position * latched * scroll normally --> 
<!-- 2. Items that go above the scroll position are given .latched --> 
<!-- 3. If they scroll down again, they lose .latched --> 
<!-- 4. div.spacer included to pad out space when content sections become latched --> 

<div class="spacer"></div> 
<div class="one"> 
    <h2>ONE</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div class="spacer"></div> 
<div class="two"> 
    <h2>TWO</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div class="spacer"></div> 
<div class="three"> 
    <h2>THREE</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div class="spacer"></div> 
<div class="four"> 
    <h2>FOUR</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div style="clear: both"></div> 
<div style="height: 1000px"></div> 

(jQuery를 1.9.1 테스트)가 CSS

.container { 
    background: black; 
    position: relative; 
} 
.spacer { 
    width: 0; 
    height: 600px; 
    float: left; 
    clear: both; 
} 
.one { background:red; width: 100%; height: 600px; position: relative; float: left; } 
.two { background: blue; width: 100%; height: 600px; position: relative; float: left; } 
.three { background: green; width: 100%; height: 600px; position: relative; float: left; } 
.four { background: yellow; width: 100%; height: 600px; position: relative; float: left; } 
.latched { position: fixed; top: 0; left: 8px; right: 8px; width: auto; } 

자바 스크립트

(function($){ 
    /* Store the original positions */ 
    var d1 = $('.one'); 
    var d1orgtop = d1.position().top; 
    var d2 = $('.two'); 
    var d2orgtop = d2.position().top; 
    var d3 = $('.three'); 
    var d3orgtop = d3.position().top; 
    var d4 = $('.four'); 
    var d4orgtop = d4.position().top; 

    /* respond to the scroll event */ 
    $(window).scroll(function(){ 
     /* get the current scroll position */ 
     var st = $(window).scrollTop(); 

     /* change classes based on section positions */ 
     if (st >= d1orgtop) { 
      d1.addClass('latched'); 
     } else { 
      d1.removeClass('latched'); 
     } 
     if (st >= d2orgtop) { 
      d2.addClass('latched'); 
     } else { 
      d2.removeClass('latched'); 
     } 
     if (st >= d3orgtop) { 
      d3.addClass('latched'); 
     } else { 
      d3.removeClass('latched'); 
     } 
     if (st >= d4orgtop) { 
      d4.addClass('latched'); 
     } else { 
      d4.removeClass('latched'); 
     } 
    }); 

})(window.jQuery); 

마크

Answer 2

, jsfiddle에 그것을 밖으로 근무

나는 당신이 높이가 조금 엉망인 것을 발견했습니다.이것은 완벽하게 작동

body{ 
    width: 100%; 
} 

#one{ 
    width: 100%; 
    height: 440px; 
    position: fixed; 

    background: gold; 
} 

#two{ 
    width: 100%; 
    height: 400px; 
    top: 800px; 
    position: relative; 

    background: goldenrod; 
} 

#three{ 
    width: 100%; 
    height: 430px; 
    top: 800px; 
    position: relative; 

    background: darkgoldenrod; 
} 

, 여기에서 입증 된 바와 같이 : 것 ScrollMagic를 사용하여이 당신을 위해 작동 http://jsfiddle.net/gv8GU/2/

희망, -Jcpopp

Answer 3

시대 말,하지만 당신은이에 값을 변경할 때 작동 이것을 가능하게하는 더 좋은 방법입니다. 자신의 scrollwipes 섹션을 확인 : http://scrollmagic.io/examples/basic/section_wipes_natural.html

기본적인 아이디어는, 전체 화면 섹션을 만들 scrollMagic 장면에 넣어 장소로 애니메이션을 setPin(el)를 사용한다는 것입니다.

<section class="panel blue"> 
    <b>ONE</b> 
</section> 
<section class="panel turqoise"> 
    <b>TWO</b> 
</section> 
<section class="panel green"> 
    <b>THREE</b> 
</section> 
<section class="panel bordeaux"> 
    <b>FOUR</b> 
</section> 

<script> 
    $(function() { // wait for document ready 
     // init 
     var controller = new ScrollMagic.Controller({ 
      globalSceneOptions: { 
       triggerHook: 'onLeave' 
      } 
     }); 

     // get all slides 
     var slides = document.querySelectorAll("section.panel"); 

     // create scene for every slide 
     for (var i=0; i<slides.length; i++) { 
      new ScrollMagic.Scene({ 
        triggerElement: slides[i] 
       }) 
       .setPin(slides[i]) 
       .addIndicators() // add indicators (requires plugin) 
       .addTo(controller); 
     } 
    }); 
</script>