jQuery滚动100％高度div答案

【问题标题】：Jquery scroll 100% height divjQuery滚动100％高度div
【发布时间】：2014-08-30 20:47:01
【问题描述】：

我将有许多高度为 100vh 的 div，例如 #pg1、#pg2 堆叠在一起。然后，如果我向下滚动一点点或按下箭头按钮（链接带有将在右上角的图像），它会将另一个 div 定位为平滑地占据页面的 100%。

编辑：像这样（不完全是）：http://jsfiddle.net/wofbbzjy/

<div id="pg1">Teste</div>
<div id="pg2">Teste</div>
<div id="pg3">Teste</div>

$(document).ready(function(){
    $(window).scroll(function(){
        var content_height = $(document).height();
        var content_scroll_pos = $(window).scrollTop();
        var percentage_value = content_scroll_pos * 100 / content_height;

        if(percentage_value >= 0){
            $('html,body').animate({
              scrollTop: $('#pg2').position().top
            }, 1000);
            return false;
        }
    });
});

#pg1, #pg2 {
    background-color: grey;
    height: 100vh;
    width: 100%;
}
#pg2 {
    background-color: yellow;
}
#pg3 {
    background-color: black;
}

【问题讨论】：

那么问题是什么？
我不知道如何设置 jquery 来做我想做的事
我试过这样的东西，但这不是我想要的jsfiddle.net/wofbbzjy
@user3417825 如果不在您的问题中包含代码，则不允许直接链接到 jsFiddle 是有原因的。我已将链接小提琴中的代码块添加到您的问题中，请确保从现在开始也这样做。

标签： jquery html scroll jquery-animate

【解决方案1】：

你的问题是什么？你想知道如何做到这一点 -> 让 100vh 页面在滚动时相互滑动吗？

编辑

好的。所以这就是你可以做的（也许有更好的方法）：

使body溢出：隐藏；
将第一个 div 定位为固定和 100vh。
使其他 div 相对，并将它们放在彼此下方（不堆叠）
为 div 指定不同的 z-index，以便它们相互对齐。
然后在div的Y位置为0时，将css位置改为fixed，然后使用jQuery将其锁定在页面顶部。

（顺便说一句，有很多开源项目可以为您做到这一点。我强烈建议您查看它们）

【讨论】：

请让它成为答案，而不是问题
这些项目叫什么名字？
你能发布一个 jsfiddle 的例子吗？我做不到
我现在不能，因为我要睡觉了...会向你推荐窗帘.js。如果你明天还没有解决，请告诉我。我会写一个小提琴;)

【解决方案2】：

你的意思是这样的吗？ http://jsfiddle.net/LBBO/dj0cv286/1/

var visible = null;
function scrollTo(element){
    $('html, body').animate({ scrollTop: ($(element).position().top)}, 'slow');
};
$(document).ready(function() {
    visible = $('div').first();
    $(window).keyup(function(e) {
        if(e.which == 38) {
            visible = visible.prev();
            scrollTo(visible);
        }
        if(e.which == 40) {
            visible = visible.next();
            scrollTo(visible);
        }
    });
});

【讨论】：