從部分滾動到部分

Question

我建立一個網站，有一些路段，他們每一位都是窗口的100％的高度，但800像素

我想使滾動將視圖從部分轉移到最小但如果滾動低於800，則將按照正常滾動的方式進行操作，直至到達結束或新節的開始，然後滾動至該節。

我試圖寫自己的腳本，但它不工作很好enoght
有沒有一個好的腳本或教程？

（這是我試過到目前爲止做的......但沒有成功...）

var prevScroll = $(window).scrollTop(); 
var currentSection = getCurrentSection(); 

$(window).scroll(function(){ 
    var newScroll = $(this).scrollTop(); 
    if (newScroll > prevScroll){ 
     checkScrolling("down"); 
    } else { 
     checkScrolling("up"); 
    } 
    prevScroll = newScroll; 
}); 


function checkScrolling(direction) { 

    var fromTop = $(window).scrollTop(); 
    var windowHeight = Math.max($(window).height(), 800); 
    var currentPlace = $(currentSection).offset().top; 

    if (direction == "down") { 
     if (currentSection != ".blogs") { 
      var nextPlace = $(currentSection).next().offset().top; 
      if (fromTop+windowHeight >= nextPlace) { 
       $("html, body").animate({scrollTop: nextPlace}, 1000); 
       setTimeout(function(){ 
        currentSection = getCurrentSection(); 
       }, 1001); 
      } 
     } 
    } else { 
     if (currentSection != ".about") { 
      var prevPlace = $(currentSection).prev().offset().top; 
      if (fromTop <= prevPlace+windowHeight) { 
       $("html, body").animate({scrollTop: prevPlace}, 1000); 
       setTimeout(function(){ 
        currentSection = getCurrentSection(); 
       }, 1001); 
      } 
     } 
    } 
} 

function getCurrentSection() { 
    var fromTop = $(window).scrollTop(); 
    var windowHeight = Math.max($(window).height(), 800); 
    var s1 = $(".about").offset().top; 
    var s2 = $(".works").offset().top; 
    var s3 = $(".blogs").offset().top; 

    if (s1 <= fromTop && fromTop < s1+windowHeight) { 
     return ".about"; 
    } else if (s2 <= fromTop && fromTop < s2+windowHeight) { 
     return ".works"; 
    } else if (s3 <= fromTop && fromTop <= s3+windowHeight) { 
     return ".blogs"; 
    } 
} 

Answer 1

我建議你看scrollMagic

http://scrollmagic.io/examples/basic/section_wipes_natural.html

Answer 2

我開發一個小jquery腳本來回答。 用上下觸摸複製粘貼和測試。

var prevScroll = $(window).scrollTop(); 
 
var currentSection = getCurrentSection(); 
 

 

 
$(document).keydown(function(e) { 
 
    var newScroll = $(window).scrollTop(); 
 
    switch(e.which) { 
 
     case 38: // up 
 
     checkScrolling("up"); 
 
     break; 
 

 
     case 40: // down 
 
     checkScrolling("down"); 
 
     break; 
 

 
     default: return; // exit this handler for other keys 
 
    } 
 
    prevScroll = newScroll; 
 
    e.preventDefault(); // prevent the default action (scroll/move caret) 
 
}); 
 
; 
 

 

 
function checkScrolling(direction) { 
 

 
    var fromTop = $(window).scrollTop(); 
 
    var currentSection = getCurrentSection(); 
 
    var windowHeight = Math.max($(window).height(), 800); 
 
    var currentPlace = $(currentSection).offset().top; 
 

 
    if (direction == "down") { 
 

 
     if($(currentSection).next().length > 0){ 
 
       var nextPlace = $(currentSection).next().offset().top; 
 
       $("html, body").animate({scrollTop: nextPlace}, 1000); 
 
       $(currentSection).removeClass("current"). 
 
       next().addClass('current'); 
 
     } 
 

 
    } else { 
 
     if($(currentSection).prev().length > 0){ 
 
       var prevPlace = $(currentSection).prev().offset().top; 
 
       $("html, body").animate({scrollTop: prevPlace}, 1000); 
 
       $(currentSection).removeClass("current"). 
 
       prev().addClass('current'); 
 
     } 
 
    } 
 
} 
 

 
function getCurrentSection() { 
 
    return $(".current"); 
 
}

body{ 
 
\t \t \t margin:0; 
 
\t \t \t padding:0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t position: absolute; 
 
\t \t } 
 

 
\t \t body section{ 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t max-height: 800px; 
 
\t \t } 
 

 
\t \t body section:nth-child(1){ 
 
\t \t \t background: grey; 
 
\t \t } 
 
\t \t body section:nth-child(2){ 
 
\t \t \t background: red; 
 
\t \t } 
 
\t \t body section:nth-child(3){ 
 
\t \t \t background: yellow; 
 
\t \t } 
 
\t \t body section:nth-child(4){ 
 
\t \t \t background: cyan; 
 
\t \t } 
 

 
\t \t body section[class=current]{ 
 
\t \t \t border: 2px solid #000; 
 
\t \t }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Test Scroll</title> 
 
\t <link rel="stylesheet" type="text/css" href="css.css"> 
 
\t <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> 
 
\t <script type="text/javascript" src="js.js"></script> 
 
</head> 
 
<body> 
 
\t <section class="current"> 
 
\t </section> 
 
\t <section> 
 
\t </section> 
 
\t <section> 
 
\t </section> 
 
\t <section> 
 
\t </section> 
 
</body> 
 
</html>