从部分滚动到部分

Question

我正在建立一个有一些部分的网站，每个部分都是100％的窗口高度，但最低为800px

我想进行滚动，将一个滚动中的视图从一个部分移动到另一个部分，但如果滚动较低，则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脚本来回答。 用上下触摸复制粘贴和测试。

＆＃13;

＆＃13;

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");
}

＆＃13;

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

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;