div가 하나의 스크롤과 div로 스크롤되도록 스크롤합니다. divs가 이미 서로 스크롤합니다.

Question

화면에서 위쪽으로 스크롤하지 않고 divs를 서로 위에 스크롤했습니다 (여기 jsfiddle).

(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);

.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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- 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 dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div class="spacer"></div> 
 
<div class="two"> 
 
    <h2>TWO</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div class="spacer"></div> 
 
<div class="three"> 
 
    <h2>THREE</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div class="spacer"></div> 
 
<div class="four"> 
 
    <h2>FOUR</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div style="clear: both"></div> 
 
<div style="height: 1000px"></div>

지금 내가 (섹션 섹션으로 스크롤) 하나의 스크롤 div에하는 사업부에서 스크롤 할 - 예를 들어 여기 jsfiddle를 참조하십시오. 한 div의 애니메이션 효과를 다른 div에 스크롤링으로 적용하는 경우

Answer 1

설정을 약간 수정해야합니다. div에 배열을 넣은 다음 스크롤 이벤트의 대상 div를 추적 할 수 있도록 코드를 수정했습니다. 또한 요소로 스크롤 할 때 생성되는 스크롤 이벤트를 무시해야합니다. this answer의 코드는 그 점에서 도움이되었습니다. ([jsfiddle] http://jsfiddle.net/xtyus를 참조

(function($) { 
 
    var prevScroll = 0; //stores last successful scroll 
 
    var scrollIdx = 0; //current index in your div array 
 
    //array that contains the div object and original offset from the top to handle the animation 
 
    var divs = [{ 
 
    div: $('.one'), 
 
    top: $('.one').position().top 
 
    }, { 
 
    div: $('.two'), 
 
    top: $('.two').position().top 
 
    }, { 
 
    div: $('.three'), 
 
    top: $('.three').position().top 
 
    }, { 
 
    div: $('.four'), 
 
    top: $('.four').position().top 
 
    }]; 
 
    var scrollDestination = -1; //stores the target div's offset 
 

 
    // handles div fixing as the scroll transitions from one div to the next 
 
    function setLatch(st) { 
 
    divs.forEach(function(divObj) { 
 
     if (st >= divObj.top) { 
 
     divObj.div.addClass('latched'); 
 
     } else { 
 
     divObj.div.removeClass('latched'); 
 
     } 
 
    }) 
 
    } 
 

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

 
    //reset the latch as the scroll occurs 
 
    setLatch(st); 
 

 
    // check the state of the scroll event 
 
    if (scrollDestination == -1) { //we're done scrolling 
 
     //noop 
 
    } else if (st != scrollDestination) { //we're still scrolling, ignore 
 
     return; 
 
    } else if (st == scrollDestination) { //we're done, but ignore this final scroll event 
 
     scrollDestination = -1; 
 
     prevScroll = st; 
 
     return; 
 
    } 
 

 
    //determine the direction of the scroll; 
 
    if (st > prevScroll) { 
 
     scrollDir = 1; 
 
    } else { 
 
     scrollDir = -1; 
 
    } 
 

 
    if (scrollIdx + scrollDir == divs.length || scrollIdx + scrollDir < 0) { 
 
     //do nothing bu update the prevScroll so we can accurately 
 
     //capture the direction the next time around 
 
     prevScroll = st; 
 
     return; 
 
    } 
 

 
    scrollIdx += scrollDir; 
 
    //record the destination of the next div 
 
    scrollDestination = divs[scrollIdx].top; 
 
    $('html, body').animate({ 
 
     scrollTop: divs[scrollIdx].top 
 
    }, { 
 
     duration: 1000 
 
    }); 
 

 
    }); 
 

 
})(window.jQuery);

.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- 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 dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat 
 
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum 
 
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec 
 
    erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla 
 
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div class="spacer"></div> 
 
<div class="two"> 
 
    <h2>TWO</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat 
 
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum 
 
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec 
 
    erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla 
 
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div class="spacer"></div> 
 
<div class="three"> 
 
    <h2>THREE</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat 
 
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum 
 
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec 
 
    erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla 
 
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div class="spacer"></div> 
 
<div class="four"> 
 
    <h2>FOUR</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat 
 
    ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum 
 
    mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec 
 
    erat. Sed ultrices ornare volutpat.</p> 
 

 
    <p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla 
 
    mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p> 
 
</div> 
 
<div style="clear: both"></div> 
 
<div style="height: 1000px"></div>